React JS - 在某些状态值上触发事件答案

【问题标题】：React JS - trigger event on certain state valueReact JS - 在某些状态值上触发事件
【发布时间】：2017-04-26 03:59:00
【问题描述】：

当子组件的状态保持一定值时，如何从父组件触发事件？

例如：假设我有一个 Parent 组件和一个 Child 组件，其中 parent 的 state 具有属性 activeIndex，child 的 state 具有 property activeTask。

如果孩子的 state 的 activeTask 属性等于 3，我想触发 parent 的 props.handleNextChild 方法。

我该怎么做？

【问题讨论】：

标签： javascript reactjs

【解决方案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 变量，以确保在调用回调（又名：handleNextChild）之前设置状态，以避免多次调用它，并确保每次将 activeTask 设置为 3 时，孩子都得到处理一次。

【讨论】：

如果我们只需要触发一次handleNextChild，我们可以添加另一个名为currentChildHandled的状态道具，如果我们满足要求，则将其设置为true，并添加到要求中，所以它必须是false
确实如此。我会将其添加到答案中。
虽然它不能作为状态工作（因为你永远不知道状态变化是否会被抢占）而且它也不适合状态（因为渲染不依赖于它）所以我将它添加为实例变量。
我刚刚将您的答案投了回去^^，这与我的想法相同。在我看来，从父级传递回调并使用 componentDidUpdate 是正确的方法。我还回答了几个与将回调作为道具传递以及何时从子组件触发它相关的问题：stackoverflow.com/questions/43589766/… 和 stackoverflow.com/questions/43601156/…

【解决方案2】：

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

伪代码：

家长

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

【讨论】：

onChange 并非在所有组件上都可用。此外，只执行handleNextChild 而不重置状态可能会导致多次虚假调用。
@PedroCastilho op 在哪里说他不需要多次调用，而且 onChange 在任何组件中都不可用，除非您添加它是回调。所以只是不要做任何假设，并给出解决问题的想法。这只是一个伪代码。
问题是你这里需要一个生命周期方法来检查是否满足期望的条件，所以即使你将onChange作为回调传递，这也不起作用。并且 OP 的问题措辞方式暗示他们希望在每次状态更改时触发一次事件。
顺便说一句，如果您能就您为什么拒绝我的回答提出一些建设性的批评，我将不胜感激。
我刚刚回复了你们的答案^^，无论如何这很有帮助，并且类似于我的想法，即传递来自父母的回调。但是，我认为在这里我们应该使用 @pedro-castilho 的答案中的 use componentDidUpdate 。我还回答了几个与将回调作为道具传递以及何时从子组件触发它相关的问题：stackoverflow.com/questions/43589766/… 和 stackoverflow.com/questions/43601156/…

【解决方案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

【讨论】：