React onClick-通过事件传递参数

JavaScript React.js

逆天Pro逆天

2020-03-18

没有参数

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

第2097篇《React onClick-通过事件传递参数》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
小小Near阳光 2020.03.18

为了完全解决造成新的回调问题，利用data-*HTML5中的属性是IMO的最佳解决方案。从一天开始，即使您提取了一个子组件来传递参数，它仍然会创建新功能。

例如，

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

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

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

TonyEvaL 2020.03.18

解决方案1 

function clickMe(parameter, event){
}

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

解决方案2 在解决方案1中，使用绑定函数比使用箭头函数更好。请注意，事件参数应该是处理函数中的最后一个参数。

function clickMe(parameter, event){
}

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

使用ES6，您可以像这样更短地进行操作：

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

并使用它：

<button onClick={clickMe(someParameter)} />
阿飞卡卡西 2020.03.18

尝试这个：

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

并在您的职能：

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android