>假设我有一个React类P，它提供了两个子类C1和C2。
> C1包含输入字段。我将这个输入字段称为Foo。
>我的目标是让C2对Foo的变化做出反应。
> C1包含输入字段。我将这个输入字段称为Foo。
>我的目标是让C2对Foo的变化做出反应。
我想出了两个解决方案，但他们都觉得不对。
第一解决方案：
>分配P a状态，state.input。
>在P中创建一个onChange函数，它接收一个事件并设置state.input。
>将此onChange传递给C1作为道具，并让C1将this.props.onChange绑定到Foo的onChange。
这工作。每当Foo的值改变时，它触发P中的setState，所以P将有输入到C2。
但它不会觉得相当正确的同样的原因：我设置一个父元素的状态从子元素。这似乎背叛了React的设计原则：单向数据流。
这是我应该怎么做，还是有更多的React天然解决方案？
第二解决方案：
只要把Foo放在P.
但是这是我应该遵循的设计原则，当我结构我的应用程序放置所有表单元素的渲染的最高级类？
像我的例子，如果我有一个大的渲染C1，我真的不想把整个渲染的C1渲染的P只是因为C1有一个表单元素。
我应该怎么办？
所以，如果我正确地理解你，你的第一个解决方案是建议你保持状态在你的根组件？我不能为React的创造者说话，但一般来说，我认为这是一个适当的解决方案。
原文链接：https://www.f2er.com/react/303781.html维护状态是React创建的原因之一(至少我认为)。如果你已经实现了自己的状态模式客户端来处理一个动态UI，它有很多相互依赖的移动部分，那么你会喜欢React，因为它减轻了很多这种状态管理的痛苦。
通过将状态进一步保持在层次结构中，并通过事件更新来更新它，你的数据流仍然是单向的，你只是响应根组件中的事件，你不是真的通过双向绑定获取数据，你告诉Root组件“hey，发生在这里的事情，检查值”或者你传递子组件中的一些数据的状态，以更新状态。你改变了C1的状态，你希望C2知道它，所以，通过更新根组件和重新渲染的状态，C2的道具现在是同步的，因为状态在根组件中更新并传递。
class Example extends React.Component {
constructor (props) {
super(props)
this.state = { data: 'test' }
}
render () {
return (
<div>
<C1 onUpdate={this.onUpdate}/>
<C2 data={this.state.data}/>
</div>
)
}
onUpdate (data) { this.setState({ data }) }
}
class C1 extends React.Component {
render () {
return (
<div>
<input type='text' ref='myInput'/>
<input type='button' onClick={this.update} value='Update C2'/>
</div>
)
}
update () {
this.props.onUpdate(this.refs.myInput.getDOMNode().value)
}
})
class C2 extends React.Component {
render () {
return <div>{this.props.data}</div>
}
})
ReactDOM.renderComponent(<Example/>,document.body)
