从子组件设置父状态

Question

我有一个父组件和一个子组件。

子组件基本上是一个导航栏。而 Parent 呈现导航栏。

我想在点击子组件时更改父状态。

父构造函数

   constructor(props) {
      super(props); // Must call
      this.state = {show: "login", user: "guest"};
}

 render() {
 contents = <><Menu/><Activities /></>;
      return (
      contents
      );
}

子组件

  constructor(props) {
      super(props); // Must call
      // a member variable called "state" to hold the state as a JS object
      this.state = {show: "login", user: "guest",
      };
 render() {
 contents =  contents = <ul>
            <li><a >Home</a></li>
            <li><a >Activities</a></li>
            <li><a >Membership</a></li>
            </ul>;

      return (
      contents
      );
}

Answer 1

和 React 一样，the Data Flows Down，子组件改变其父组件的状态，只能通过回调传递给父组件来完成。

您可以通过props、Context API 或使用任何状态管理库来传递回调。

例如：

class App extends Component {
  state = { show: "login", user: "guest" };

  render() {
    return (
      <>
        <Menu />
        <Activities onClick={this.setState} />
      </>
    );
  }
}

class App extends Component {
  state = { show: "login", user: "guest" };

  render() {
    return (
      <ul>
        <li onClick={() => this.props.onClick({ show: "Home" })}>
          <a>Home</a>
        </li>
        <li onClick={() => this.props.onClick({ show: "Activities" })}>
          <a>Activities</a>
        </li>
      </ul>
    );
  }
}