React onClick - truyền sự kiện với tham số

Không có tham số

function clickMe(e){
  //e is the event
}

<button onClick={this.clickMe}></button>

Có tham số

function clickMe(parameter){
  //how to get the "e" ?
}
<button onClick={() => this.clickMe(someparameter)}></button>

Tôi muốn lấy event. Làm thế nào tôi có thể nhận được nó?

Thử đi:

<button onClick={(e) => {
     this.clickMe(e, someParameter)
}}>Click Me!</button>

Và trong chức năng của bạn:

function clickMe(event, someParameter){
     //do with event
}

Với ES6, bạn có thể làm theo cách ngắn hơn như sau:

const clickMe = (parameter) => (event) => {
    // Do something
}

Và sử dụng nó:

<button onClick={clickMe(someParameter)} />

Giải pháp 1

function clickMe(parameter, event){
}

<button onClick={(event) => {this.clickMe(someparameter, event)}></button>

Giải pháp 2 Sử dụng hàm liên kết được coi là tốt hơn, so với cách hàm mũi tên, trong giải pháp 1. Lưu ý rằng tham số sự kiện phải là tham số cuối cùng trong hàm xử lý

function clickMe(parameter, event){
}

<button onClick={this.clickMe.bind(this, someParameter)}></button>

Để giải quyết triệt để vấn đề tạo lệnh gọi lại mới, sử dụng các data-*thuộc tính trong HTML5 là giải pháp tốt nhất IMO. Vì cuối cùng, ngay cả khi bạn trích xuất một thành phần phụ để chuyển các tham số, nó vẫn tạo ra các chức năng mới.

Ví dụ,

const handleBtnClick = e => {
  const { id } = JSON.parse(e.target.dataset.onclickparam);
  // ...
};

<button onClick={handleBtnClick} data-onclickparam={JSON.stringify({ id: 0 })}>

Xem https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes để sử dụng data-*thuộc tính.

Tách lạng bộ với ES6 dụ:

const clickHandler = param => event => {
  console.log(param); // your parameter
  console.log(event.type); // event type, e.g.: click, etc.
};

Nút của chúng tôi, trình xử lý bật tắt:

<button onClick={(e) => clickHandler(1)(e)}>Click me!</button>

Nếu bạn muốn gọi biểu thức hàm này mà không có đối tượng sự kiện, thì bạn sẽ gọi nó theo cách này:

clickHandler(1)();

Ngoài ra, vì react sử dụng các sự kiện tổng hợp (một trình bao bọc cho các sự kiện gốc), nên có một điều là gộp sự kiện , có nghĩa là, nếu bạn muốn sử dụng eventđối tượng của mình một cách không đồng bộ, thì bạn phải sử dụng event.persist():

const clickHandler = param => event => {
  event.persist();
  console.log(event.target);
  setTimeout(() => console.log(event.target), 1000); // won't be null, otherwise if you haven't used event.persist() it would be null.
};

Đây là ví dụ trực tiếp: https://codesandbox.io/s/compassionate-joliot-4eblc?fontsize=14&hidenavigation=1&theme=dark