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 no longer refers to the React component object中的this.handleClick，因为它在传递给forEach的匿名函数中。一般情况下，您可以bind将this函数this.props.data.forEach( function(name) { ... }.bind(this));添加到其上下文中，例如

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

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

{{1}}

Answer 2

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

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

onClick事件在放入ReactJS中的forEach循环时未传递函数

2 个答案: