React.js中的OnClick事件绑定

Question

我想传递父divID,点击该div或任何相同的子元素div.但我无法实现它.请告诉我我在哪里弄错了.代码如下:

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

Answer 1

viewMore = (i,j) => () => {
    console.log(i,j)
}

要将参数传递给事件处理程序,我们需要使用currying.使用上述方法,在调用render时,不会一直创建新函数.

Answer 2

由于我在多个地方看到了这些建议,我也会将我的评论转移到答案中,以提供额外的观点:

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以更多的React-ive方式访问和其他任何属性.

当然,上面的例子假设您收到了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>
    );
  }
}

更新4 - 2018年2月4日

由于bindV8中的朋友和Chacol(也许是Chakra等)的改进,你可能会更好地使用this.click.bind(this)或在传递时将其包装在箭头功能中onClick.

为什么？

之前的方法仅仅是出于性能原因而创建的,它为将函数动态注入组件的原型提供了一些可能性.

注1 - 2018年4月14日

请记住,Update 4中提到的方法仍然会引入一些性能问题,因为每次render传递都会创建一个新函数bind.反过来,这将逐渐渗透到子组件并导致不必要的重新渲染,因为函数每次都会更改.

传递内联箭头函数时会发生同样的事情.

所有其他方法,比如使用类属性,都会破坏你的继承(你应该避免,但仍然如此),原因很简单,因为目前,Babel将它们转换为"on-instance"函数,而这些函数不在原型链.

所以这:

class Person {
  printA = () => { console.log('a') }
}

变为:

function _classCallCheck(instance, Constructor) {...abridged...}

var Person = function Person() {
  _classCallCheck(this, Person);

  this.printA = function () {
    console.log('a');
  };
};

Answer 3

我在这里为ES6做了更新的答案:https://stackoverflow.com/a/35748912/76840

基本上,您可以使用箭头函数表达式,它具有以下优点this:

onClick={(event)=>this.viewMore(attributeId, event)}

在此编辑中,如果您在启用stage-2的情况下使用Babel,则可以使用如下属性:

// Within your class...
viewMore = (event) => { /* ... */ }
// Within render method in your JSX
onClick = {this.viewMore}

Answer 4

你可以使用currying功能.

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")}