如何使用 ES6 语法向 onClick 事件传递额外的参数？
例如：
handleRemove = (e) => {
}
render() {
<button onClick={this.handleRemove}></button>
}
我想像这样将 id 传递给 handleRemove 函数：
<button onClick={this.handleRemove(id)}></button>
【问题讨论】：
标签： reactjs
像这样使用箭头函数：
<button onClick={()=>{this.handleRemove(id)}}></button>
【讨论】：
JSX functions should not use arrow functions react/jsx-no-bind
请记住，在onClick={ ... } 中，... 是一个 JavaScript 表达式。所以
... onClick={this.handleRemove(id)}
与
相同var val = this.handleRemove(id);
... onClick={val}
换句话说，您立即调用this.handleRemove(id)，然后将该值传递给onClick，这不是您想要的。
相反，您想创建一个 new 函数，其中一个参数已经预填充；本质上，您需要以下内容：
var newFn = function() {
var args = Array.prototype.slice.call(arguments);
// args[0] contains the event object
this.handleRemove.apply(this, [id].concat(args));
}
... onClick={newFn}
在 ES5 JavaScript 中有一种表达方式：Function.prototype.bind。
... onClick={this.handleRemove.bind(this, id)}
如果你使用React.createClass，React 会在实例方法上自动为你绑定this，除非你将其更改为this.handleRemove.bind(null, id)，否则它可能会报错。
你也可以简单的内联定义函数；如果您的环境或转译器支持arrow functions，这会缩短：
... onClick={() => this.handleRemove(id)}
如果您需要访问该事件，您可以直接传递它：
... onClick={(evt) => this.handleRemove(id, evt)}
【讨论】：
this._deleteText(result.text)，当我的表格加载时，每个带有删除按钮的表格行都会触发删除调用......哎呀！
onClick={this.handleRemove.bind(this, id)}
使用箭头函数
onClick={()=>{this.handleRemove(id)}}
【讨论】：
JSX props should not use .bind() react/jsx-no-bind
到目前为止没有人提到的是让 handleRemove 返回一个函数。
你可以这样做：
handleRemove = id => event => {
// Do stuff with id and event
}
// render...
return <button onClick={this.handleRemove(id)} />
但是，所有这些解决方案都有在每次渲染时创建新函数的缺点。最好为 Button 创建一个新组件，分别通过 id 和 handleRemove。
【讨论】：
id 和event 并执行handleRemove() 职责的函数。不确定您遇到的问题是什么？您在实施时遇到任何问题吗？ “不管它返回什么”是前面提到的可以访问id 和event 的函数。
使用按钮元素的value attribute传递id，为
<button onClick={this.handleRemove} value={id}>Remove</button>
然后在handleRemove中，从事件中读取值：
handleRemove(event) {
...
remove(event.target.value);
...
}
这样可以避免每次重新渲染此组件时都创建一个新函数（与使用箭头函数相比）。
【讨论】：
event.currentTarget.value 而不是event.target.value 就可以了。
Uncaught TypeError: Cannot read property 'handleRemove' of undefined。这甚至是在我的constructor(props) 顶部执行this.handleRemove = this.handleRemove.bind(this); 之后。
TL;DR:
不要在渲染方法中绑定函数（也不要使用箭头函数）。请参阅官方建议。
https://reactjs.org/docs/faq-functions.html
所以，有一个公认的答案和几个相同的答案。还有一些 cmets 阻止人们在渲染方法中使用bind，并且出于同样的原因也避免在那里使用箭头函数（这些函数将在每次渲染时一次又一次地创建）。但是没有例子，所以我写一个。
基本上，你必须在构造函数中绑定你的函数。
class Actions extends Component {
static propTypes = {
entity_id: PropTypes.number,
contact_id: PropTypes.number,
onReplace: PropTypes.func.isRequired,
onTransfer: PropTypes.func.isRequired
}
constructor() {
super();
this.onReplace = this.onReplace.bind(this);
this.onTransfer = this.onTransfer.bind(this);
}
onReplace() {
this.props.onReplace(this.props.entity_id, this.props.contact_id);
}
onTransfer() {
this.props.onTransfer(this.props.entity_id, this.props.contact_id);
}
render() {
return (
<div className="actions">
<button className="btn btn-circle btn-icon-only btn-default"
onClick={this.onReplace}
title="Replace">
<i className="fa fa-refresh"></i>
</button>
<button className="btn btn-circle btn-icon-only btn-default"
onClick={this.onTransfer}
title="Transfer">
<i className="fa fa-share"></i>
</button>
</div>
)
}
}
export default Actions
关键行是：
构造函数
this.onReplace = this.onReplace.bind(this);
方法
onReplace() {
this.props.onReplace(this.props.entity_id, this.props.contact_id);
}
渲染
onClick={this.onReplace}
【讨论】：
'PropTypes' is not defined。你错过了什么。
import PropTypes from 'prop-types'
我正在使用 React-Bootstrap。下拉菜单的 onSelect 触发器不允许我传递数据。只是事件。所以请记住，您可以将任何值设置为属性并使用 javascript 从函数中获取它们。获取您在该事件目标中设置的那些属性。
let currentTarget = event.target;
let currentId = currentTarget.getAttribute('data-id');
let currentValue = currentTarget.getAttribute('data-value');
【讨论】：
我使用以下代码：
<Button onClick={this.onSubmit} id={item.key} value={shop.ethereum}>
Approve
</Button>
然后在方法里面：
onSubmit = async event => {
event.preventDefault();
event.persist();
console.log("Param passed => Eth addrs: ", event.target.value)
console.log("Param passed => id: ", event.target.id)
...
}
结果：
在事件中传递的参数 => Eth 地址：0x4D86c35fdC080Ce449E89C6BC058E6cc4a4D49A6
在事件中传递的参数 => id: Mlz4OTBSwcgPLBzVZ7BQbwVjGip1
【讨论】：
在函数组件中，这很有效 - 自 2020 年以来的新 React 用户 :)
handleRemove = (e, id) => {
//removeById(id);
}
return(<button onClick={(e)=> handleRemove(e, id)}></button> )
【讨论】：