在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> ) }; 

4 Solutions collect form web for “在React.js中的OnClick事件绑定”

使用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> ); } } 

这允许:

  1. 避免不必要的绑定
  2. 访问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")} 
  • React.Component与React.createClass
  • 反应checkbox不发送onChange
  • 在多页面应用中使用React
  • 如何从jQuery到React.js?
  • 为什么说React的虚拟DOM概念比脏模型检查更高效?
  • Webpack-dev-server提供一个目录列表,而不是应用程序页面
  • 什么是Redux @connect装饰器中的@(符号)?
  • 如何从React中的事件对象访问自定义属性?
  • 在React.js表单组件中使用状态或引用?
  • 在React.js 0.12这个.key
  • 在redux存储中更新嵌套的数据