将表单元素状态传递给兄弟/父元素的正确方法是什么？

Question

null

null

就像在我的示例中一样，如果我有一个C1的大型呈现，我真的不想仅仅因为C1有一个form元素就把C1的整个render放到P的render中。

我该怎么做？

Answer 1

所以，如果我理解正确的话，第一个解决方案是建议您在根组件中保留状态？我不能代表React的创作者，但总的来说，我发现这是一个合适的解决方案。

维护状态是创建React的原因之一（至少我认为）。如果您曾经实现过自己的状态模式客户端来处理有许多相互依赖的移动部分的动态UI，那么您会喜欢React，因为它减轻了许多状态管理的痛苦。

通过将状态保持在层次结构中的更高位置，并通过事件更新它，数据流仍然是单向的，您只是响应根组件中的事件，并不是通过双向绑定真正获得那里的数据，而是告诉根组件“嘿，下面发生了什么事情，请检查值”，或者将子组件中一些数据的状态向上传递以更新状态。您更改了C1中的状态，并且希望C2知道它，因此，通过更新根组件中的状态并重新呈现，C2的道具现在是同步的，因为状态是在根组件中更新并传递的。

class Example extends React.Component {
  constructor (props) {
    super(props)
    this.state = { data: 'test' }
  }
  render () {
    return (
      <div>
        <C1 onUpdate={this.onUpdate.bind(this)}/>
        <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.bind(this)} 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)