从子组件设置父状态

Posted 2023-02-23

【中文标题】从子组件设置父状态

【英文标题】：Setting Parent State from Children Component

【发布时间】：2021-03-14 01:55:49

【问题描述】：

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

子组件基本上是一个导航栏。而 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
      );

【问题讨论】：

您需要将父组件的setState 传递给子组件。

这能回答你的问题吗？ react js set state from parent to child component

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