Question

我有一个带有两个子组件的父组件。

当在一个子组件中单击一个按钮时，我需要在另一个子函数中调用一个函数。

我尝试了许多方法，但无法正确调用。有人可以指出正确的方向吗？

在这里使用ref是正确的方法吗？

Answer 1

您可以使用Callbacks解决此问题。 Redux is for complex data-flow applications。
这是可行的解决方案。

//ChildOne Component
class ChildOne extends React.Component {
  clickHandler = () => {
    this.props.callbackHandler();
  };
  render() {
    return <button onClick={this.clickHandler}>Click ChildOne</button>;
  }
}
//ChildTwo Component
class ChildTwo extends React.Component {
  state = {
    btnClicked: false
  };
  componentDidMount() {
    if (this.props.btnClicked) this.setState({ btnClicked: true });
  }
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.btnClicked !== prevState.btnClicked) {
      return { btnClicked: nextProps.btnClicked };
    } else return null;
  }
  ChildTwoFunc = () => {
    alert("ChildTwo function is invoked");
  };
  render() {
    if (this.state.btnClicked) this.ChildTwoFunc();
    return <div>{this.state.btnClicked}</div>;
  }
}
//Parent Component
class Parent extends React.Component {
  state = {
    btnClicked: false
  };
  callbackHandler = () => {
    //console.log("123");
    this.setState({ btnClicked: true });
  };
  render() {
    return (
      <div>
        <ChildOne callbackHandler={this.callbackHandler} />
        <ChildTwo btnClicked={this.state.btnClicked} />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Parent />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

在同级组件中调用函数

1 个答案: