Javascript 正在从子组件更新状态

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

我有两个部分

新采购订单母公司。 选择仓库子组件。 选择Warehouse组件将呈现NewPurchaseOrder组件中可用仓库的下拉列表

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

父组件有一个状态warehouseId来跟踪所选仓库，要从正在执行此操作的子组件更新父组件状态warehouseId

父组件

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

<SelectWarehouse
  updateTarget={ warehouseId }
/>

然后从子组件更新仓库ID

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

可能吗

---

我只发送了一个没有运气的状态来测试它，也不可能仅用一个简单的状态来绑定这个上下文

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

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

也许为了使它更清晰，您可以将逻辑放在一个单独的函数中，并将该函数作为道具传递

母公司

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

---

直接从子组件更新父组件的状态是不对的。updateTarget作为func的第一个版本是正确的

此外，不必将warehouseId存储在子组件中的状态中。warehouseId可以作为道具传递给子组件

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

---

我认为不可能从组件本身设置重置道具，更多信息请参阅

您应该将方法调用到父级，然后设置状态并将其传递给子级

母公司

updateTarget = (value) => {

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

---

对你的问题的简单答案是否定的。但是为什么呢

您所问的问题与Angular和Vue.js等框架中支持的双向绑定概念非常相似。这意味着数据将通过一个绑定从子组件流向父组件。React不支持这一点，因此强烈反对使用这种方法。它总是倾向于单向数据流

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

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

React使此数据流显式，以便于理解 您的程序可以运行，但它确实需要比 传统的双向数据绑定

而且

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

在您的情况下，您可能不得不接受它，重构到其他答案建议的不同格式，或者使用第三方库，就像我没有使用过它一样，所以不能推荐。

您是否只有一个SelectWarehouse子库？或者您正在准备拥有多个SelectWarehouse子项，因此您希望动态定义状态键？

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