当放置在 ReactJS 中的 forEach 循环中时，onClick 事件不传递函数

Question

我需要根据复选框中的事件显示一些 HTML。当放置在 forEach 循环 (here's my fiddle) 中时，父节点上的我的 onClick 事件没有传递函数。奇怪的是，当我将它传递给单个元素时，它会传递一个函数。

var App = React.createClass({
  getInitialState: function() {
    return {toggle: false}
  },
  handleClick : function(event){
    this.setState({toggle : !this.state.toggle});
  },
  render: function(){
    var checkboxes = [];
    this.props.data.forEach(
      function(name)
      {
        checkboxes.push(<CheckBox onClick={this.handleClick} name={name} />);
                        });
        var textBox = this.state.toggle ? <InputBox name="Bar" /> : null;
        return (
          <div>
          <CheckBox name="Foo" onClick={this.handleClick} />
          {checkboxes}
          {textBox}
          </div>
        );
      }
});

有谁知道为什么会这样？这是一个错误还是我做错了什么？

Answer 1

this.handleClick no longer refers to the React component object 中的 this 因为它在传递给 forEach 的匿名函数中。一般来说，你可以 bind 一个函数的 this 到它的上下文，就像这样

this.props.data.forEach(
  function(name) { ... }.bind(this));

对于 forEach，您也可以将其作为第二个参数传递。

this.props.data.forEach(
  function(name) { ... }, this);

Answer 2

如果您愿意，可以使用辅助变量“_self”将 "this" 上下文对象传递到匿名函数的主体中，例如：

var App = React.createClass({
    getInitialState: function() {
        return {toggle: false}
    },
    handleClick : function(event){
        this.setState({toggle : !this.state.toggle});
    },
    render: function(){
        var checkboxes = [];
        var _self = this;
        this.props.data.forEach(
        function(name)
        {
            checkboxes.push(<CheckBox onClick={_self.handleClick} name={name} />);
        });
        var textBox = _self.state.toggle ? <InputBox name="Bar" /> : null;
        return (
        <div>
            <CheckBox name="Foo" onClick={_self.handleClick} />
            {checkboxes}
            {textBox}
        </div>
        );
    }
});

当放置在 ReactJS 中的 forEach 循环中时，onClick 事件不传递函数

onClick event not passing a function when placed in a forEach loop in ReactJS

reactjs

react-jsx