调用函数以获取不同组件的状态

Question

说我有一个组件A父组件，一个组件B作为子组件。我在父级中具有“保存”功能，但是我还需要组件B的状态，如何获得父级中组件B的状态？

注意：保存的单击处理程序位于父组件中。

我可以在<ComponentB handleSave={this.handleSave} />中传递handleSave函数，但是如何在handleSave函数中获取组件B的表单状态？

Answer 1

  

我可以在<ComponentB handleSave={this.handleSave} />

中传递handleSave函数。

，通过它您可以将保存从ComponentA转移到ComponentB。

否，更好地实现某种变更处理程序

<ComponentB onChanged={(value) => {
  // do something with these values, like:
  this.setState({
    foo: value
  });
}} />

并要澄清一下：value最有可能不是state的完整ComponentB，而是实际上是要传播到使用此Component的类的数据的某种表示形式。

  

如果我想避免这种渲染道具模式怎么办？我可以代替吗？ componentB中的componentDidUpdate（）{this.props.getStates（this.state）}？其中getStates是从componentA传递的方法

1st。这不是渲染道具模式，所传递的方法不渲染任何东西。

第二。我认为componentDidUpdate不合适。甚至可能导致组件被无限循环->将值发送到父级->父级更新其状态->父级重新渲染->组件已更新-> ...

一个更好的地方是将setState内的ComponentB中的事件监听器。这是有关数据实际发生更改的地方。您想要传播给父级的更改。

3rd。再次，不要通过this.state

• 这会限制您状态的状态/包含状态，因为它现在还必须满足其他条件

• 这会公开状态对象，以便可以在不通知React的情况下修改组件的内部状态->基本上削弱了React的主要目的（根据状态和props的更改来更新视图）

传递一些不同的对象，即使这只是{...this.state}的开始。它为您提供了所有更改选项。

最后：

  

其中getStates是从componentA传递的方法

这正是我在这里所做的，只是我调用了该方法onChanged;）

Answer 2

在ComponentB内部，您可以在调用中公开状态：

 this.props.handleSave(this.state)

然后将其定义为：

handleSave(childState) {
 //...
}