Question

如果父组件的子组件的状态保持某个值，我如何从父组件触发事件？

例如：假设我有一个Parent组件和一个Child组件，其中父状态的属性为activeIndex，子状态的属性为activeTask。

如果子状态的activeTask属性等于3，我想触发父的props.handleNextChild方法。

我该怎么做？

Answer 1

每当组件的状态或道具发生变化时，生命周期方法componentDidUpdate会在更新完成后被调用，因此您可以将handleNextChild作为道具传递给您的孩子：

class Parent extends Component {
    handleNextChild() {
      //do whatever
    }

    render() {
      return (
        //stuff
        <Child callback={() => handleNextChild()} /> //arrow for lexical bind
        //more stuff
      );
    }
 }

并更改您的子组件类：

class Child extends Component {
  constructor(props) {
    super(props);
    this.callbackHandled = false
  }

  // ...child class code...

  componentDidUpdate() {
    if (this.state.activeTask === 3) {
    this.callbackHandled = false;
    this.setState({ activeTask: resetValue }, () => {
      if (!this.callbackHandled) {
        this.callbackHandled = true;
        this.props.callback();
      }
    });
  }

  render() {
    // render your child component...
  }
}

只要状态activeTask属性更改为3，就会触发此操作。但是，只要activeTask保持为3，它就会在每次更新时运行，因此如果您希望它只运行一次在我打电话给setState之前，请务必activeTask重置callback。我使用了setState的回调版本和一个nstance变量，以确保在调用回调（aka：handleNextChild）之前设置状态以避免调用它多次，并确保每次activeTask设置为3时，孩子都会被处理一次。

Answer 2

没有直接的方法来实现这一点，在父母中创建回调并通过prop将其传递给子。然后继续检查子项是否满足所需条件，然后触发回调。

伪代码：

<强>父

class Parent extends Component {
    handleNextChild = () => {
            // parent logic comes here
    }
    render() {
        return (
                <Child handleNextChild = this.handleNextChild />
        );
    }
}

儿童：

class Child extends Component { onChange = () => { if(this.state.activeTask === 3){ this.props.handleNextChild(); } }.....

Answer 3

所以我改变了我的应用程序的逻辑：只需在我的json-data中设置活动子索引并将其用作状态

@Statements = React.createClass
  displayName: 'Statements'
  getInitialState: ->
    statements: @props.statements
    attempt: @props.attempt
    activeIndex: @props.attempt.active_statement

  updateStates: (data) ->
    @setState activeIndex: data.attempt.active_statement
    @setState attempt: data.attempt
    @setState statements: data.statements

React JS - 触发某些状态值的事件

3 个答案: