OnClick React.js 中的事件绑定

Question

我想在单击该 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>
    )
};

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和任何其他属性。

当然，上面的示例假设您将id作为道具接收，但您也可以进行必要的操作。

更新 1 -- 2016 年 11 月 28 日

添加了来自上述评论的CodePen链接。

更新 2 -- 2017 年 3 月 30 日

如前所述，如果您使用React.createClass来定义组件，这将不起作用。 你没有一个构造函数来实现它。 如果您不介意有点丑陋，您可以使用其他生命周期方法。

话虽如此，现在是 2017 年。使用 ES6，你会吗？！

更新 3 -- 2017 年 5 月 12 日

如果您使用的是类属性 transform ，那么您可以进一步简化它：

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 日

由于 V8 中bind和朋友的改进（Chakra 等可能也是如此），您最好使用this.click.bind(this)或在传递给onClick时将其包装在箭头函数中。

为什么？

之前创建的方法只是出于性能原因，关闭了将函数动态注入组件原型的一些可能性。

注 1——2018 年 4 月 14 日

请记住，更新 4 中提到的方法仍然引入了一些性能问题，因为在每次render过程中，都会创建一个新函数作为bind的结果。 反过来，这将渗透到子组件并导致不必要的重新渲染，因为函数每次都在变化。

当您内联传递箭头函数时，也会发生同样的事情。

所有其他方法，比如使用类属性，都会干扰你的继承（你应该避免，但仍然如此），仅仅是因为目前 Babel 将它们转换为“实例上”函数，这些函数不在原型链。

所以这：

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

在此编辑中，如果您使用启用了第 2 阶段的 Babel，您可以使用如下属性：

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

Answer 4

您可以使用柯里化功能。

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

Answer 5

以下是先前答案的更新和概述：

1. 通过使用的onClick = {this.viewMore.bind（此，属性Id）} @HenrikAndersson 。而这种方法提供它使用的绑定的语法与许多不舒服的目的。

2. 使用@ZenMaster提到的公共类字段。这个解决方案或多或少具有相同的性能，它还带有更好的语法。 但是当我们必须传递一个参数时就变得很棘手了。

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

上面提到的方法跳过传递参数，而是使用自定义属性来访问点击处理程序中所需的数据。

更好的解决方案是：

class MyComponent extends React.Component {

    handleClick = (item) => (e) => {
        e.preventDefault()    
        console.log(`This has access to item ${item}! and event(e)`)
    }

    render(){
        const item={ id:'1', value: 'a' }
        return(
            <button onClick={ this.handleClick(item) }  >Click</button>
        )
    }

}

参考： 在 React 应用中通过箭头函数处理事件

Answer 6

var attributeId = "groups_";
  attributeId = 32;

  const viewMore = (val) => () => {
    console.log(val)
  }
  return (
    //parent div
    <div className="groups" id={attributeId} onClick={viewMore(attributeId)}>
      <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>
  )