更正所有者状态的正确方法

Question

我有两个组件，联系表单和输入。

此时我将onChangeEvent从联系传递到输入，如许多教程中所述，其工作正常 - 输入更新其所有者状态。

但是有办法将'this'从联系传递给prop或者上下文输入，然后我可以更新所有者状态而不传递onChangeEvent - 但这是个好主意吗？

是否有其他选项可以更新所有者状态而不传递onChangeEvent？

Answer 1

我相信你可以在技术上做到这一点，因为React组件最终是一个常规的javascript对象，所以你可以将它作为道具传递。

然而，由于各种原因，这一般不是一个好主意：

• 它将两个组件紧密地连接在一起。如果您想在其他地方重用输入组件，则需要传入完全相同的状态。
• 与此相关联，它允许通过另一个组件操纵一个组件的内部状态，这违反了良好的OO设计。

然而，你是正确的，当这样工作时，事情往往变得非常冗长。当一个组件有更复杂的组件树通过道具并在它们之间改变处理程序时，它们也变得难以推理。

该问题的一个解决方案是采用Flux设计模式，即它是Redux实现。

在Redux中，只有一个全局状态，一个普通对象，其中的组件可以看到碎片（子对象）。组件将此状态作为props接收，并以简单的方式从中呈现。有一组动作可以转换这种状态，任何组件都可以通过用户交互来发出这样的动作。仍然存在“状态”的概念，但它保留用于真正的本地事物，例如在按下保存按钮之前的表单状态等。