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

Posted 2023-02-21

【中文标题】在父按钮单击时调用并执行多个子函数

【英文标题】：Call and execute multiple child functions on parent button click

【发布时间】：2020-04-24 06:04:58

【问题描述】：

我正在尝试从父组件按钮单击调用每个子组件函数。尝试使用道具并将按钮单击分配给 componentDidMount 函数上的新函数，但结果是只有最后一个函数 alert(" child2 save"); 正在分配并在单击按钮时执行，我预计 alert("child1 save"); 也将被执行。

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

 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>);
      
  

【参考方案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");

【讨论】：

感谢您的回答 是的，这是一个很好的解决方案，但在我的实际情况中，我不仅有 2 个，而且还有很多 20 个或更多子组件正在动态呈现，并且父子之间没有直接联系他们在父组件中有 6 个或更多级别的嵌套组件，直到到达子组件级别本身，在这种情况下我该怎么办我应该如何将此引用传递给子组件？

您可以使用 redux 并包装所有组件，并调度操作，并将 prevProps 值与嵌套组件中的当前值进行比较。