ReactJS 从孩子更新状态

Posted 2023-03-03

【中文标题】ReactJS 从孩子更新状态

【英文标题】：ReactJS updating state from child

【发布时间】：2014-05-14 23:34:14

【问题描述】：

我正在使用 ReactJS 和 CoffeeScript (:

实际上我有一个处理状态的组件 A。状态字段被传递给孩子（在该示例中称为 myChild）。子需要从父状态更新一些值。

我怎样才能以 ReactJS 的方式做到这一点？

A = React.createClass
  getInitialState: 
    mystate: test: 1

  render: ->
    myChild param: @state.mystate


myChild = React.createClass
  render: ->
    React.DOM.div onClick: @change, @props.param.test

  change: ->
    @props.param.test += 1 # WRONG WRONG WRONG
    ajax("/..../", JSON.stringify(@props.param))
      .done(@onDone).fail(...)

  onDone: ->
    console.log "Hum..."

评论：

[e-mail] 不能那样改变（为了连贯性，它应该是不可变的）。

[e-mail] 实际上是组件 A 状态中的对象，因此应该使用 @setState 更新它，这是不可能的，因为我们在子组件中:(

我怎样才能清除这个以拥有一个好的 ReactJS 组件？

保罗?你还会帮我吗？ :D

【问题讨论】：

我想解决方案是：1) Create a clone of @props.param then update @props.param.test 2) Do the ajax request 3) Reload the parent component ? But how to reload the parent ?

【参考方案1】：

父母是真相的来源，所以孩子需要告诉父母改变它的状态。将一个回调从父级传递给子级，并让子级调用它。

在 React 的文档中有一个关于 communicating between components 的示例，可能也有帮助。

A = React.createClass
  getInitialState: ->
    mystate: test: 1

  incrementTest: ->
    @setState mystate: test: @state.mystate.test + 1

  render: ->
    myChild onChange: @incrementTest, param: @state.mystate


myChild = React.createClass
  render: ->
    React.DOM.div onClick: @change, @props.param.test

  change: ->
    @props.onChange
    ajax("/..../", JSON.stringify(@props.param))
      .done(@onDone).fail(...)

  onDone: ->
    console.log "Hum..."

【讨论】：

很好，我忘记了回调解决方案:)