Question

没有参数

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

Answer 1

试试这个

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

在你的功能中

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

Answer 2

Currying（带有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 pooling的问题，这意味着，如果要异步使用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

Answer 3

解决方案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>

Answer 4

使用ES6，您可以通过以下更简单的方式进行操作：

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

可以使用它：

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

Answer 5

要完全解决造成新的回调问题，利用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。

Answer 6

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <script type = "module" defer src="script.js"></script>

使用参数反应onClick - 传递事件

没有参数

使用参数

6 个答案: