将状态中的参数从子级传递给父级

Question

我已经把这个问题缠了好一阵子了，我敢肯定这很简单，但是我无法完全点击它。学习React我正在尝试将状态作为参数从孩子传递给父母

孩子：

handleSubmit() {
  this.setState({finalValue: this.state.inputValue})
  this.props.changeFont(this.state.finalValue)
}

父母：

<Fonts 
  changeFont={()=> this.setState({fontState: this.state.finalValue})} 
/>

显然，此代码当前无法正常运行，但这实际上是我要尝试的工作；传递this.state.finalValue值作为要在父级中使用的参数，这样我就可以在父级组件中将其用作值。

Answer 1

setState是异步的，不会立即突变this.state，因此，如果要在状态变量上设置状态后立即执行操作，则应使用setState回调。

setState（updater，[callback]）

孩子：

handleSubmit() {
  this.setState({finalValue: this.state.inputValue}, 
  ()=>this.props.changeFont(this.state.finalValue)) //callback
  
}

父母： 通过子组件将参数传递给功能

<Fonts 
  changeFont={(finalValue)=> this.setState({fontState: finalValue})} 
/>