使用参数响应 onClick-pass 事件

没有参数

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。我怎样才能得到它？

145557 次浏览
小开
最佳答案

试试这个:

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

在你的职责中:

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

解决方案1 

function clickMe(parameter, event){
}


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

解决方案2 在解决方案1中，使用 bind 函数被认为比使用箭头函数更好。 注意，事件参数应该是处理程序函数中的最后一个参数

function clickMe(parameter, event){
}


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

使用 ES6，你可以用一种更短的方式来完成:

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

使用它:

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

为了彻底解决创建新的回调问题，利用 HTML5中的 data-*属性是 IMO 的最佳解决方案。 因为到最后，即使您提取了一个子组件来传递参数，它仍然会创建新的函数。

比如说,

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


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

有关使用 data-*属性的信息，请参见 https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes。

小开

用 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)();

此外，由于 response 使用合成事件(本机事件的包装器) ，因此有一个 事件池事件，这意味着，如果您想异步使用 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

小开 
<Button onClick={(e)=>(console.log(e)}>Click Me</Button>

提交答案