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

Question

我有一个父组件 A 为他的子组件 B 计算一些初始值。实际上我在组件 A 的 componentDidMount() 中计算初始值并通过道具将它传递给 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 继承初始值，然后在 B 发生变化时更新 A 状态而不擦除 B 的状态。

Answer 1

父组件中的任何更改都会触发子组件的重新渲染。 我相信最适合您情况的方法是在从 A 继承初始值之后，为 B 组件设置一些本地状态变量以专门管理该状态，使其与 A 分开。

Answer 2

嘿，即使如果我理解正确，您可能会做得更好，但我认为您可以通过使用以下方法来实现您想要的：

this.props.value

在 B 组件上：

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

然后当您处理更新时，只需将event.target.value传递给父级（组件）

我不是 100% 确定这是否是您要问的，但这里有一个例子：

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