时间戳

首页 > 解决方案 > 将状态中的参数从子级传递给父级

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

问题描述

我一直在思考这个问题，我确信这很简单，但我不能完全点击它。学习反应我试图将状态作为参数从孩子传递给父母

孩子：

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

家长：

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

显然，这段代码目前不起作用，但这本质上就是我想要做的；将this.state.finalValue值作为要在父组件中使用的参数传递，以便我可以在父组件中将其用作值。

标签： javascriptreactjs

解决方案

setState是异步的并且不会立即改变this.state，所以如果你想在设置状态变量的状态后立即执行一个动作，你应该使用 setState 回调。

setState（更新程序，[回调]）

孩子：

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

父级：从子组件向函数传递参数

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

推荐阅读