从子组件reactjs更新状态

Question

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

我有两个部分，

1. NewPurchaseOrder（父组件）
2. 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。

可能吗？

我通过仅发送没有运气的状态进行了测试，也无法仅通过简单状态绑定此上下文。

Answer 1

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

您要问的内容与Angular和Vue.js等框架中支持的双向绑定概念非常相似。 这意味着数据将通过一个绑定从子组件流入和流出父组件。 React不支持这一点，并且强烈反对使用这种方法。 它始终喜欢单向数据流。

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

为了更好地理解它，我建议您阅读React官方文档中的“ React中的思考”部分。 他们认为这种方法比神奇的双向绑定更容易理解程序的工作方式。

React使该数据流明确化，以使其易于理解程序的工作方式，但是与传统的双向数据绑定相比，它确实需要更多的输入。

也，

尽管这听起来很复杂，但实际上仅是几行代码。 而且非常明确的是您的数据如何在整个应用程序中流动。

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

Answer 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) }
/>

Answer 3

直接从子级更新父级组件的状态是不正确的。 带有<SelectWarehouse />作为func的<SelectWarehouse />的第一个版本是正确的。

同样，也不必在子组件的状态下存储WarehouseId。 WarehouseId可以作为道具传递给子组件。

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

Answer 4

我认为无法从组件本身设置重置道具，更多信息请参考link 。

您应该将方法调用为父方法，然后设置State并将其传递给子方法。

父母

updateTarget = (value) => {

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

儿童

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