从子组件 reactjs 更新状态答案

【问题标题】：Updating state from child component reactjs从子组件 reactjs 更新状态
【发布时间】：2017-11-05 04:19:44
【问题描述】：

我正在尝试优雅地重构组件，以便我们可以轻松地将组件用于相同的用例。

我有两个组件，

NewPurchaseOrder（母公司）
SelectWarehouse（子组合）

SelectWarehouse 组件会在 NewPurchaseOrder 组件中呈现可用仓库的下拉列表。

父组件有一个状态warehouseId 来跟踪选定的仓库，从我正在执行的子组件更新父组件状态（warehouseId），

父组件

<SelectWarehouse
  updateTarget={ ( ghostValue ) => {
    this.setState( {
      warehouseId: ghostValue // updating the state from child comp. value
    }, () => {
      console.log( 'yokygoky', this.state.warehouseId )
    } )
  } }
/>

子组件

handleChangeWarehouse( e ) {
  this.setState( {
    selectedWarehouse: e.target.value
  }, () => {
    this.props.updateTarget( e.target.value ) // Updating the parent props
  } )
}

现在我要做的是只从父组件发送状态名称，而不是发送函数，然后从子组件更新父组件的状态。它看起来像这样，

<SelectWarehouse
  updateTarget={ warehouseId }
/>

然后从子组件更新warehouseId。

有可能吗？

我已经通过仅发送状态而没有运气来测试它，也无法仅将此上下文与简单状态绑定。

【问题讨论】：

你只有一个SelectWarehouse 孩子吗？或者您是否正在准备拥有多个 SelectWarehouse 孩子的能力，因此您想动态定义状态键？

标签： javascript reactjs jsx

【解决方案1】：

您的问题的简单答案是否。但为什么呢？

您的问题与 Angular 和 Vue.js 等框架支持的双向绑定概念非常相似。这意味着数据将通过一个绑定从子组件流入和流出到父组件。 React 不支持这一点，并且非常不鼓励使用这种方法。它总是更喜欢单向数据流。

因此，使用 React，您可以使用 props 轻松地将数据从组件树的顶部发送到底部。但是如果你想要从下到上的反向重定向，你唯一的选择就是回调。您可以将回调作为道具传递给您的子组件，当数据准备好时，它将使用相关数据调用回调。有时，当我们需要在深度嵌套的组件之间进行通信时，这很困难。因此，您需要使用像 Redux 或 React context 这样的状态管理库，如果您不是经验丰富的开发人员，不建议使用。

为了更好地理解它，我建议你阅读 React 官方文档中的Thinking in React 部分。他们相信这种方法比神奇的双向绑定更容易理解程序的工作原理。

React 使这个数据流明确化，以便于理解如何你的程序可以工作，但它确实需要比传统的双向数据绑定。

还有，

虽然这听起来很复杂，但实际上只是几行代码。和您的数据在整个应用程序中的流动方式非常明确。

在您的情况下，可能您必须忍受它，重构为其他答案建议的不同格式或使用第三方库，如react-binding（我没有使用它，所以不能推荐）。

【讨论】：

【解决方案2】：

状态是特定于组件范围的东西，因此您不能通过直接访问它来访问和修改另一个组件的状态，您必须调用要更改其状态的特定组件的方法。

因此，您使用的第一种方法是正确的方法。

也许为了更简洁，您可以将逻辑放在单独的函数中并将该函数作为道具传递

父母

updateTarget = (newValue) => {

    this.setState( {
      warehouseId: newValue // updating the state from child comp. value
    }, () => {
      console.log( 'yokygoky', this.state.warehouseId )
    } )
}
<SelectWarehouse
  updateTarget={ ( ghostValue ) => this.updateTarget(ghostValue) }
/>

【讨论】：

【解决方案3】：

直接从子组件更新父组件的状态是不对的。 <SelectWarehouse /> 的第一个版本以 updateTarget 为 func 是对的。

另外，没有必要在子组件中存储状态中的warehouseId。 warehouseId 可以作为 props 传递给子组件。

<SelectWarehouse
  updateTarget={( ghostValue ) => {
    this.setState( {
      warehouseId: ghostValue
    })
  }}
  warehouseId={this.state.warehouseId}
/>

【讨论】：

【解决方案4】：

我认为无法从组件本身设置reset props，更多请参考link。

你应该调用一个方法给父级，然后设置状态并将它传递给子级。

父母

updateTarget = (value) => {

   this.setState( {
     warehouseId: value 
   })
}
<SelectWarehouse
 updateTarget= {this.updateTarget }
/>

孩子

handleChangeWarehouse( e ) {
  this.setState( {
    selectedWarehouse: e.target.value
  }, () => {
    this.props.updateTarget( e.target.value )       
  })
}

【讨论】：