Sự kiện React

Tìm hiểu cách tương tác với các sự kiện trong ứng dụng React

React cung cấp một cách dễ dàng để quản lý các sự kiện. Chuẩn bị nói lời tạm biệt vớiaddEventListener.

Trong bài viết trước về State, bạn đã thấy ví dụ này:

const CurrencySwitcher = props => {
  return (
    <button onClick={props.handleChangeCurrency}>
      Current currency is {props.currency}. Change it!
    </button>
  )
}

Nếu bạn đã sử dụng JavaScript một thời gian, điều này giống như cũTrình xử lý sự kiện JavaScript, ngoại trừ việc lần này bạn đang xác định mọi thứ trong JavaScript, không phải trong HTML của bạn và bạn đang truyền một hàm chứ không phải một chuỗi.

Tên sự kiện thực tế hơi khác một chút vì trong React, bạn sử dụng camelCase cho mọi thứ, vì vậyonclicktrở thànhonClick,onsubmittrở thànhonSubmit.

Để tham khảo, đây là HTML cũ với các sự kiện JavaScript được trộn vào:

<button onclick="handleChangeCurrency()">...</button>

Trình xử lý sự kiện

Đó là một quy ước để có các trình xử lý sự kiện được định nghĩa là các phương thức trên lớp Thành phần:

class Converter extends React.Component {
  handleChangeCurrency = event => {
    this.setState({ currency: this.state.currency === '€' ? '
: '€'})}}

Tất cả các trình xử lý đều nhận được một đối tượng sự kiện tuân theo, trình duyệt chéo, vớiThông số sự kiện giao diện người dùng W3C.

Trói buộcthistrong các phương pháp

Đừng quên ràng buộc các phương thức. Các phương thức của các lớp ES6 theo mặc định không bị ràng buộc. Điều này có nghĩa làthiskhông được xác định trừ khi bạn xác định các phương thức dưới dạng hàm mũi tên:

class Converter extends React.Component {
  handleClick = e => {
    /* ... */
  }
  //...
}

khi sử dụng cú pháp trình khởi tạo thuộc tính với Babel (được bật theo mặc định trongcreate-react-app), nếu không, bạn cần phải ràng buộc nó theo cách thủ công trong hàm tạo:

class Converter extends React.Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick(e) {}
}

Các sự kiện tham khảo

Có rất nhiều sự kiện được hỗ trợ, đây là danh sách tóm tắt.

Bảng tạm

Thành phần

Bàn phím

Tiêu điểm

Hình thức

Chuột

Lựa chọn

Chạm

Giao diện người dùng

Con lăn chuột

Phương tiện truyền thông

Hình ảnh

Hoạt hình

Chuyển tiếp

Tải xuống miễn phí của tôiSổ tay React


Các hướng dẫn về phản ứng khác: