反应：将状态从孩子传递给孩子到父母

Question

我试图通过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})
}

Answer 1

问题是你如何将道具从child2传递给child1 。 您没有将值作为props传递，而是作为child2组件中的children传递。 将其更改为

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