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。您没有将值作为道具传递，而是在children组件中传递为child2。将其更改为

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

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

1 个答案: