React：将状态从孩子传递到孩子再传递给父母

Posted 2023-02-22

【中文标题】React：将状态从孩子传递到孩子再传递给父母

【英文标题】：React: Passing state from child to child to parent

【发布时间】：2018-06-29 01:43:32

【问题描述】：

我试图通过 2 个子元素将值传递给父元素。链条看起来像这样：

Child1 > Child2 > Parent

但是，我的父处理程序没有获取 Child1 中的值。我试图在父组件中控制台记录theString 的状态，但是没有显示任何内容。如何将处理函数传递给 child1 并获取其值以存储在状态中？

孩子 1

  <input ref="theString" type="string" onChange=this.props.handleChangeOfString value=this.state.theString />

子 2 组件

<Tab tabId="4">
   this.props.nav4Content
   this.props.handleChangeOfString
</Tab>

父构造函数：

constructor(props) 
    super(props);
    this.state = 
       theString: ''
    ;
    this.handleChangeOfString = this.handleChangeOfString.bind(this);

父级组件：

<StringComponent
  nav4Content=colorsTab
  onChange=this.handleChangeOfString
/>

父处理程序：

handleChangeOfString(e) 
  this.setState(theString: e.target.value)

【参考方案1】：

问题是您如何将道具从child2 传递到child1。您不是将值作为道具传递，而是作为 child2 组件中的 children 传递。改成

<Tab 
   tabId="4" 
   nav4Content=this.props.nav4Content 
   handleChangeOfString=this.props.onChange
/>  

【讨论】：

这不是调用处理函数成功。我正在尝试注销处理程序中的更改，但没有任何内容传递给它。

你的child1组件是Tab，或者child1是如何从child2渲染出来的

我不得不像你说的那样重新设计我的组件并更新道具！