Вызов и выполнение нескольких дочерних функций по нажатию родительской кнопки - PullRequest
Новая
       12

Вызов и выполнение нескольких дочерних функций по нажатию родительской кнопки

0 голосов
/ 06 января 2020

Я пытаюсь вызывать функции каждого дочернего компонента с помощью нажатия кнопки родительского компонента. Попробуйте сделать это, используя реквизиты и назначив нажатие кнопки для новой функции в функции 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 Ответ

0 голосов
/ 07 января 2020 
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'));

Вы могли бы сделать это так и использовать разные ссылки для всех детей. Или вы можете иметь переменную состояния в parent и передавать ее потомкам потомка parent, а также использовать eventHandler в componentDidUpdate в дочерних компонентах. И изменяйте состояние всякий раз, когда вы хотите вызвать дочерние функции. 

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