Gắn sự kiện trong JSX

Bây giờ hãy cùng tìm hiểu cách làm việc với sự kiện trong React. Ví dụ, hãy làm sao để khi nhấp chuột vào một khối sẽ hiển thị alert với một văn bản nào đó.

Giả sử chúng ta có hàm showMess, hàm này hiển thị alert với một thông báo, và trong mã HTML có một nút bấm, khi nhấp vào đó chúng ta muốn thấy alert này:

jsxfunction App() {
  function showMess() {
    alert('hello');
  }
  
  return <div>
    <button>show</button>
  </div>;
}

Hãy gắn sự kiện onclick cho nút bấm của chúng ta sao cho khi nhấp vào khối div này thì hàm showMess sẽ được thực thi. Để làm điều này cần thêm thuộc tính onClick (chính xác là camelCase, tức là onClick, chứ không phải onclick), và trong đó chỉ định hàm sẽ được thực thi theo sự kiện này:

jsxfunction App() {
  function showMess() {
    alert('hello');
  }
  
  return <div>
    <button onClick={showMess}>show</button>
  </div>;
}

Đó là cách làm việc với sự kiện: thêm một thuộc tính (ví dụ: onClick hoặc onFocus), giá trị của thuộc tính chỉ định phương thức sẽ được gọi theo sự kiện đó.

jsxfunction App() {
  function show1() {
    alert(1);
  }
  
  function show2() {
    alert(2);
  }
  
  return <div>
    <button>act1</button>
    <button>act2</button>
  </div>;
}