javascript - Reactjs - 父子 Action 和函数

Question

我正在开发一个 reactjs 应用程序 - 我正在分解一个大组件以拥有一个子组件。我在 child 中创建了一个回调函数，它将返回给 parent 。当一个复选框被选中时——子组件执行回调并返回到父 shell——但是我现在想跳出事件回调并将数据推送到原始父函数。

我的应用程序在简化的层面上看起来像这样。

var Parent = React.createClass({

    onSelect: function(value, flag){
     this.updateSelected(value, flag);
    }

    updateSelected: function(value, flag) {

        let array = this.state.selectedArray;

        array.push({"value": value, "flag": flag});
        this.setState({
            selectedArray: array
        });
    },

    render: function() {
        return (
            <div>
                <Child onSelect={this.changeHandler} />
                <span>{this.state.value}</span>
            </div>
        );
    }
});

var Child = React.createClass({
    selectHandler: function(e) {
        this.props.onSelect(e.target.value, false);
    },
    render: function() {
        return (
            <input type="checkbox" onSelect={this.selectHandler} />
        );
    }
});

但我不能只调用“this.updateSelected(value, flag);”因为它在这个范围内。

Answer 1

你应该使用 ES6 语法和 JSX 语法而不是纯粹的 React API，这有助于你减少这种关于范围界定的错误并使你的代码更具可读性，但如果你甚至想使用该语法，因此一旦传递给子组件就应该绑定(bind)该函数，您可以这样做:

var Parent = React.createClass({

    onSelect: function(value, flag){
     this.updateSelected(value, flag);
    }

    updateSelected: function(value, flag) {

        let array = this.state.selectedArray;

        array.push({"value": value, "flag": flag});
        this.setState({
            selectedArray: array
        });
    },

    render: function() {
        return (
            <div>
                <Child onSelect={this.changeHandler.bind(this)} />
                <span>{this.state.value}</span>
            </div>
        );
    }
});

如您所见，添加 .bind 方法并将您希望函数执行的上下文作为参数传递，然后一旦您的函数被调用，该函数的范围将改为父组件子组件。

Remember that this approach bind method could affect the improve of your component if your Parent component rerenders many times.

如果你使用 JSX 语法，你应该做类似的事情

class YourComponent extends React.Component {
  changeHandler = (value, flag) => {
    this.updateSelected(value, flag);
  }
  render() {
    return (
      <div>
        ...
        <Child onSelect={this.changeHandler} />
      </div>
    );
  }
}