使用父组件将初始值传递给子组件，而无需依赖状态ReactJS

编程问答 2022-06-05

问题描述

我有一个父组件A，它为其子组件B计算一些初始值。实际上，我在组件A的componentDidMount（）中计算了初始值，并将其通过props传递给B：

<ComponentB initialValue={this.state.value} handleChange={this.handleChange}/>

在组件B中我做

this.state = {value: this.props.initialValue}

此后，组件B应独立管理其状态。但是，每次值更改时，我都希望它更新A的状态，但信息较少。

在组件B中：

const onChange = (event) => { 
      this.setState({value: event.target.value + "only in B"});
      this.props.handleChange(this.state.value);
}

在组件A中：

const handleChange = (value) => { 
      this.setState({value: value});
}

问题在于A总是有最后一个字，而B中的值并不保留“ only in b”后缀。 A再次呈现时，通过initialValue道具将B的状态值重置为其内部状态值。

所以基本上，我想做的是首先在A渲染时从A继承初始值，然后在B中发生更改时更新A状态而不删除B的状态。

解决方法

父组件中的任何更改都会触发子组件的重新渲染。我认为，针对您的情况的最佳方法是从A继承初始值后，为B组件设置一些局部状态变量以专门管理该状态，从而将其与A分开。

,

即使我了解正确，即使您可以采取更好的方法，但我认为您可以通过使用以下方法实现所需的目标：

this.props.value

关于B组件：

<input defaultValue={this.props.value} onChange={this.onChange}/>

，然后在处理更新时，只需将event.target.value传递给父项（一个组件）

我不确定100％是否是您要的，但这是示例：

https://codepen.io/pegla/pen/qBNxqBd?editors=1111

javascriptreactjsreactjs