- 假设我有一个React类P，它呈现两个子类C1和C2
- C1包含一个输入字段。我将把这个输入字段称为Foo
- 我的目标是让C2对Foo的变化做出反应
我提出了两个解决方案，但两个都不太合适
第一个解决方案：
- 为P分配一个状态，
状态。输入 - 在P中创建一个
onChange函数，它接收一个事件并设置状态。input - 将此
onChange作为props传递给C1，并让C1将this.props.onChange绑定到Foo的onChange
这很有效。每当Foo的值改变时，它就会触发P中的setState，因此P将有输入传递给C2
但出于同样的原因，它感觉不太正确：我正在从子元素设置父元素的状态。这似乎违背了React的设计原则：单向数据流。
我应该这样做，还是有更具反应性的天然溶液？
第二种解决方案：
把福放在p
但这是我在构建应用程序时应该遵循的设计原则吗？将所有表单元素放在最高级别的渲染中？
就像在我的例子中，如果我有一个大的C1渲染，我真的不想把整个C1的render放到p的render，仅仅因为C1有一个表单元素
我该怎么做
所以，如果我理解正确，您的第一个解决方案是建议您在根组件中保持状态？我不能代表React的创建者说话，但总的来说，我觉得这是一个合适的解决方案
保持状态是创建React的原因之一（至少我认为是这样）。如果您曾经实现过自己的状态模式客户端，用于处理具有许多相互依赖的移动部件的动态UI，那么您会喜欢React，因为它减轻了很多这种状态管理的痛苦
通过在层次结构中进一步保持状态，并通过事件进行更新，您的数据流仍然是单向的，您只是对根组件中的事件进行响应，您并不是通过双向绑定在那里获取数据，而是告诉根组件“嘿，这里发生了一些事情，请检查这些值”或者您正在向上传递子组件中某些数据的状态，以便更新状态。您更改了C1中的状态，并且希望C2知道它，因此，通过更新根组件中的状态并重新渲染，C2的道具现在是同步的，因为状态在根组件中更新并传递
类示例扩展React.Component{
建造师（道具）{
超级（道具）
this.state={data:'test'}
}
渲染（）{
返回(
<；div>；
<；C1 onUpdate={this.onUpdate.bind（this）}/>；
<；C2 data={this.state.data}/>；
<；/div>；
)
}
onUpdate（data）{this.setState（{data}）}
}
类C1扩展了React.Component{
渲染（）{
返回(
<；div>；
<；输入类型='text'ref='myInput'/>；
<；input type='button'onClick={this.update.bind（this）}value='update C2'/>；
<；/div>；
)
}
更新（）{
this.props.onUpdate（this.refs.myInput.getDOMNode（）.value）
}
})
C2类扩展了反应组件{
渲染（）{
返回<；div>；{this.props.data}<；/div>；
}
})
ReactDOM.renderComponent（<；Example/>；，document.body）