Javascript 反应 onClick - 传递带参数的事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42597602/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React onClick - pass event with parameter
提问by IMOBAMA
Without Parameter
无参数
function clickMe(e){
//e is the event
}
<button onClick={this.clickMe}></button>
With Parameter
带参数
function clickMe(parameter){
//how to get the "e" ?
}
<button onClick={() => this.clickMe(someparameter)}></button>
I want to get the event. How can I get it?
我想得到event. 我怎么才能得到它？
回答by Jyothi Babu Araja
Try this:
尝试这个：
<button onClick={(e) => {
this.clickMe(e, someParameter)
}}>Click Me!</button>
And in your function:
在你的功能中：
function clickMe(event, someParameter){
//do with event
}
回答by Minh Kha
With the ES6, you can do in a shorter way like this:
使用 ES6，你可以用更短的方式做这样的事情：
const clickMe = (parameter) => (event) => {
// Do something
}
And use it:
并使用它：
<button onClick={clickMe(someParameter)} />
回答by Bence Dergez
Solution 1
解决方案1
function clickMe(parameter, event){
}
<button onClick={(event) => {this.clickMe(someparameter, event)}></button>
Solution 2Using the bind function is considered better, than the arrow function way, in solution 1. Note, that the event parameter should be the last parameter in the handler function
解决方案2使用bind函数被认为比解决方案1中的箭头函数方式更好。 注意，事件参数应该是处理函数中的最后一个参数
function clickMe(parameter, event){
}
<button onClick={this.clickMe.bind(this, someParameter)}></button>
回答by Harry Chang
To solve the creating new callback issue completely, utilize the data-*attributes in HTML5 is the best solution IMO.
Since in the end of the day, even if you extract a sub-component to pass the parameters, it still creates new functions.
要彻底解决创建新回调问题，利用data-*HTML5 中的属性是 IMO 的最佳解决方案。因为归根结底，即使你提取一个子组件来传递参数，它仍然会创建新的函数。
For example,
例如，
const handleBtnClick = e => {
const { id } = JSON.parse(e.target.dataset.onclickparam);
// ...
};
<button onClick={handleBtnClick} data-onclickparam={JSON.stringify({ id: 0 })}>
See https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributesfor using data-*attributes.
有关使用属性的信息，请参阅https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributesdata-*。
回答by Alexander Kim
Curryingwith ES6 example:
使用 ES6 进行柯里化示例：
const clickHandler = param => event => {
console.log(param); // your parameter
console.log(event.type); // event type, e.g.: click, etc.
};
Our button, that toggles handler:
我们的按钮，切换处理程序：
<button onClick={(e) => clickHandler(1)(e)}>Click me!</button>
If you want to call this function expression without an event object, then you'd call it this way:
如果你想在没有事件对象的情况下调用这个函数表达式，那么你可以这样调用它：
clickHandler(1)();
clickHandler(1)();
Also, since react uses synthetic events (a wrapper for native events), there's an event poolingthing, which means, if you want to use your eventobject asynchronously, then you'd have to use event.persist():
此外，由于 react 使用合成事件（原生事件的包装器），因此有一个事件池，这意味着，如果您想event异步使用您的对象，那么您必须使用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.
};
Here's live example: https://codesandbox.io/s/compassionate-joliot-4eblc?fontsize=14&hidenavigation=1&theme=dark
这是现场示例：https: //codesandbox.io/s/compassionate-joliot-4eblc?fontsize=14&hidenavigation=1&theme=dark
