ReactJS: Bắt sự kiện (deal with occasion) trong React

Trong bài viết này, chúng ta sẽ cùng tìm hiểu về bắt sự kiện (deal with occasion) của 1 ingredient DOM trong React và chi tiết về từng loại sự kiện (occasion) trong React nhé!

Bắt sự kiện (deal with occasion) trong React

Việc bắt sự kiện (deal with occasions) trong React siêu giống sở hữu những ingredient DOM trong javascript. Nhưng có 1 số khác biệt về cú pháp như sau:

  • Occasions của React được đặt tên theo camelCase thay thế về lowercase.
  • Sở hữu JSX, chúng ta có thể dùng hàm (perform) để deal with occasions.

Trong React, chúng ta ko thể “return false” để chặn những hành vi mặc định của trình thông qua mà cần gọi preventDefault quản lý.

Dí dụ, sở hữu code HTML thông thường, để ngăn chặn hành vi mặc định của trình thông qua về occasion submit, ta có thể viết như sau:

<kind onsubmit=”console.log(‘You clicked submit.’); return false“> <button kind=”submit”>Submit</button> </kind>

Nhưng trong React, sẽ thay thế thế bằng:

perform Kind() { perform handleSubmit(e) { e.preventDefault(); console.log(‘You clicked submit.’); } return ( <kind onSubmit={handleSubmit}> <button kind=”submit”>Submit</button> </kind> ); }

Tại đây, biến “e” là 1 sự kiện ảo hay còn gọi là SyntheticEvent. React định nghĩa artificial occasion theo chuẩn W3C. Vì thế, chúng ta ko cần lưu ý về khả năng tương thích giữa những browser (cross-browser).

Lúc dùng React, ta ko cần gọi “addEventListener” để ingredient DOM lắng nghe lúc nó được khởi tạo. Thay thế vào ấy, chỉ cần chung cấp listener lúc ingredient ấy được render lần trước tiên.

Xem Thêm  Pentest là gì? 5 bước thực hành Pentest

Lúc ta định nghĩa 1 class element, 1 sample phổ thông} là dùng những phương thức của class để bắt sự kiện.

Lúc dùng funtion thường để trong React, chúng ta yêu cầu} cần binding nó. Ví dụ ko thì giá trị this sẽ là “undefined” và ta ko thể gọi perform cần để thực thi.

Dí dụ, element Toggle dưới đây render 1 nút để khách hàng thay thế đổi trạng thái ON – OFF:

class Toggle extends React.Part { constructor(props) { tremendous(props); this.state = {isToggleOn: true}; // Phép “ràng buộc” (bind) này là cần thiết để con trỏ `this` hoạt động trong callback this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState(prevState => ({ isToggleOn: !prevState.isToggleOn })); } render() { return ( <button onClick={this.handleClick}> {this.state.isToggleOn ? ‘ON’ : ‘OFF’} </button> ); } }

Cũng có bí quyết ko cần binding lúc định nghĩa 1 perform ấy là chúng ta dùng cú pháp “arrow perform” như sau:

class LoggingButton extends React.Part { handleClick = () => { console.log(‘that is:’, this); } render() { return ( <button onClick={this.handleClick}> Click on me </button> ); } }

Hoặc:

class LoggingButton extends React.Part { handleClick() { console.log(“that is:”, this); } render() { return <button onClick={() => this.handleClick()}>Click on me</button>; } }

Ngoài ấy, chúng ta có thể truyền thêm tham số cho occasions như sau:

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button> <button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

Sự kiện ảo (SyntheticEvent) trong React

Những hàm xử lý sự kiện sẽ được truyền vào 1 occasion của SyntheticEvent. Hoặc có thể nói đây là lớp bọc những occasion để dùng tương đương sở hữu những sự kiện của trình thông qua). Nó có giao diện (interface) giống như sự kiện của trình thông qua bao gồm stopPropagation(), và preventDefault() và hoạt động giống nhau trên mọi trình thông qua. Mọi SyntheticEvent đều là 1 object và có chung những thuộc tính sau:

Xem Thêm  Chỉ dẫn phương pháp chèn ảnh vào Excel nhanh nhất

Những Occasions được tương trợ trong React

Phía trên là toàn bộ những sự kiện mà React đã tương trợ. Hy vọng bài viết này sẽ hữu ích sở hữu mọi người. Cám ơn mọi người đã ghé thăm bài viết.

Bài viết có tham khảo thông tin tại hyperlink: https://reactjs.org/docs/occasions.html

CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO

  • Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Middle, Số 72 Lê Thánh Tôn, Phường Bến Nghé, Quận 1, Thành phố Hồ Chí MinhVăn phòng đại diện: 42 Trần Phú, Phường 4, Quận 5, Thành phố Hồ Chí Minh
  • Điện thoại: 0364 333 333Tổng đài miễn chi phí: 1800 6734
  • E mail: gross [email protected]
  • Web site: www.tino.org