javascript - React JS - 在特定状态值上触发事件

Question

当子组件的状态为特定值时，如何从父组件触发事件？

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

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

我该怎么做？

Answer 1

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

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，它就会在每次更新时运行，因此如果您想要它只运行一次，请务必在调用 callback 之前通过 setState 重置 activeTask，就像我所做的那样。我使用了 setState 的回调版本和一个实例变量，以确保在回调(又名:handleNextChild) 之前设置状态调用是为了避免多次调用它，并确保每次将 activeTask 设置为 3 时都准确地处理一次子对象。