单击父按钮调用并执行多个子函数

Question

我试图从父组件按钮单击调用每个子组件函数。尝试使用道具并在componentDidMount函数中将按钮单击指定给新函数，但结果是只有最后一个函数警报（“child2保存”）；在按钮点击时被分配和执行，我期望警报（“child1保存”）；也将被执行。

如何在父组件上单击要调用的每个子函数按钮，注意子组件在父组件内部有相当大的嵌套级别。

 class Parent extends Component {

      render() {
        return (
          <div>
            <button onClick={onSaveClick}>Save</button>
            <MainSection setSave={save=> this.onSaveClick= save}>
          </div>
        );
      }
    }


  class MainSection extends Component {
      render() {
        const {setSave} = this.props;
        return (
          <div>
              <Section1 setSave={setSave}>
              <Section2 setSave={setSave}>
          </div>
        );
      }
  }



  class Section1 extends Component {
      render() {
        const {setSave} = this.props;
        return (
          <div>
              <Child1 setSave={setSave}>
          </div>
        );
      }
  }



 class Section2 extends Component {
      render() {
        const {setSave} = this.props;
        return (
          <div>
              <Child2 setSave={setSave}>
          </div>
        );
      }
  }



  class Child1 extends Component {
      onSave() {
           alert("child1 save");
      } 
      componentDidMount() {
          const {setSave} = this.props;
          setSave(this.onSave);
      }
      render() {
        return (<div>Child1</div>);
      }
  }



  class Child2 extends Component {
      onSave() {
          alert("child2 save");
      } 

      componentDidMount() {
          const {setSave} = this.props;
          setSave(this.onSave);
      }

      render() {
        return (<div>Child2</div>);
      }
  }

Answer 1

class Parent extends Component {
  constructor(props) {
    super(props);
    this.child = React.createRef();
  }

  onClick = () => {
    this.child.current.getAlert();
  };

  render() {
    return (
      <div>
        <Child ref={this.child} />
        <button onClick={this.onClick}>Click</button>
      </div>
    );
  }
}

class Child extends Component {
  getAlert() {
    alert('getAlert from Child');
  }

  render() {
    return <h1>Hello</h1>;
  }
}

ReactDOM.render(<Parent />, document.getElementById('root'));

你可以这样做，并为所有的孩子有不同的参考。或者您可以在父级中有一个状态变量，并将其从父级传递给子级，在子组件中的componentDidUpdate中有一个eventHandler。并在需要触发子函数时更改状态。

componentDidUpdate(prevProps) {
if(prevProps.parentVariable !== this.props.parentVariable) {
  console.log("parent called");
}
}