无参数
function clickMe(e){
//e is the event
}
<button onClick={this.clickMe}></button>
带参数
function clickMe(parameter){
//how to get the "e" ?
}
<button onClick={() => this.clickMe(someparameter)}></button>
我想得到event. 我怎么才能得到它？
react onClick - 传递带参数的事件
IT技术
javascript
reactjs
events
dom-events
2021-05-20 23:30:19
4个回答
试试这个：
<button
onClick={(e) => {
this.clickMe(e, someParameter);
}}
>
Click Me!
</button>
在你的功能中：
function clickMe(event, someParameter){
//do with event
}
使用 ES6，你可以用更短的方式做这样的事情：
const clickMe = (parameter) => (event) => {
// Do something
}
并使用它：
<button onClick={clickMe(someParameter)} />
方案一
function clickMe(parameter, event){
}
<button onClick={(event) => {this.clickMe(someparameter, event)}></button>
解决方案2 使用bind函数被认为比解决方案1中的箭头函数方式更好。 注意，事件参数应该是处理函数中的最后一个参数
function clickMe(parameter, event){
}
<button onClick={this.clickMe.bind(this, someParameter)}></button>
使用 ES6 进行柯里化示例：
const clickHandler = param => event => {
console.log(param); // your parameter
console.log(event.type); // event type, e.g.: click, etc.
};
我们的按钮，切换处理程序：
<button onClick={(e) => clickHandler(1)(e)}>Click me!</button>
如果你想在没有事件对象的情况下调用这个函数表达式，那么你可以这样调用它：
clickHandler(1)();
此外，由于 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.
};
这是现场示例：https : //codesandbox.io/s/compassionate-joliot-4eblc?fontsize=14&hidenavigation=1&theme=dark