在React.js中的OnClick事件绑定
我想通过单击该div或任何同一个div的子元素的父div id。 但我无法实现。 请告诉我我在哪里犯了一个错误。 代码如下：
viewMore: function(i,j){ console.log('You clicked: ', i ); }, render : function(){ var attributeId = "groups_"; attributeId+= index; return( //parent div <div className="groups" id={attributeId} onClick={this.viewMore}> <div className="floatLeft"> Group Name: <h3>My Name</h3></div> <span className="floatRight typeCd">POC</span> <div className="clearfix"> Key Attributes: <ul> <li> POC 1</li> </ul> </div> </div> ) };
使用bind一个新的函数。
onClick={this.viewMore.bind(this, attributeId)}
由于我在多个地方看到这些build议，所以我将把我的意见转换成一个答案，以提供一个额外的观点：
class TestComponent extends React.Component { constructor() { super(); this.onClick = this.handleClick.bind(this); } handleClick(event) { const {id} = event.target; console.log(id); } render() { return ( <div> <h3 id={this.props.id} onClick={this.onClick}> {this.props.name} </h3> </div> ); } }
这允许：
- 避免不必要的绑定
- 访问
id和任何其他更多的反应方式的属性。
当然，上面的例子假设你将id作为道具，但是你也可以进行必要的操作。
更新1 – 2016年11月28日
从上面的评论添加到CodePen的链接。
更新2 – 2017年3月30日
如前所述， 如果使用React.createClass来定义组件， 这将不起作用 。 你没有一个构造函数来解决这个问题。 如果你不介意有点丑，你可以使用其他生命周期方法。
话虽如此，现在是2017年。使用ES6，你会吗？
更新3 – 2017年5月12日
如果您正在使用类属性转换 ，则可以进一步简化它：
class TestComponent extends React.Component { onClick = (event) => { const {id} = event.target; console.log(id); } render() { return ( <div> <h3 id={this.props.id} onClick={this.onClick}> {this.props.name} </h3> </div> ); } }
我已经在这里为ES6做了一个更新的答案： https ://stackoverflow.com/a/35748912/76840
本质上，你可以使用箭头函数expression式，这有利于保留this ：
onClick={(event)=>this.viewMore(attributeId, event)}
从这个编辑开始，如果你使用启用了stage-2的Babel，你可以使用如下属性：
// Within your class... viewMore = (event) => { /* ... */ } // Within render method in your JSX onClick = {this.viewMore}
你可以使用柯里函数。
ES5：
viewMore(param) { // param is the argument you passed to the function return function(e) { // e is the event object that returned }; }
ES6
viewMore = param => e => { // param is the argument you passed to the function // e is the event object that returned };
就像这样使用它：
onClick={this.viewMore("some param")}
