在层次结构中呈现的输入字段

input fields rendering in a hierarchy

本文关键字：输入字段层次结构更新时间：2023-09-26

我正在构建一个具有以下组件层次结构的简单React应用程序：

---ReqList（显示请求项列表）

------ReqListHeader（一个具有列表标题和一些按钮的div）

------ReqTable（请求项目列表）

---------ReqRow（一行请求）

------------ReqItemHeader

------------ReqItemBody

------------。。。之间还有几个组件

---------------ReqEditor

------------------文本区域

根组件通过ajax调用接收数据，并根据React的标准文档调用setState（data），一切都很好，这是正确的。我能够显示所有子代组件及其值。

但是对于表单输入（文本区域），输入不会更改。我知道我必须实现一个变更处理程序。我不确定的是，在哪里实施它？

选项一：我最初想，我只需要在它的直接所有者中添加一个changeHandler函数，方法是调用它的setState（）。但我担心，我在中级组件中引入一个状态会打破单向数据流原则。
选项二：我是否应该将changeHandler回调作为一个属性从say"ReqRow"组件一直传递到ReqEditor，这样它就可以绑定到textArea更改事件？
选项III：或者我应该从层次结构的根开始，即ReqList？这是因为，即使ReqRow也会从其所有者和其父级接收数据，等等，因为这是数据的入口点。

我不太确定在这种情况下我应该做的向上传播的水平。大多数示例都是具有两级层次结构的简单示例。我确信这是可以做到的，但需要将更改处理程序回调一直传递到它的孙子。

这是正确的吗，或者还有其他更好的方法吗？

您面临的问题可以通过使用任何Flux模式实现来解决。React只为数据呈现部分提供了一个解决方案，但它没有提供任何关于如何处理数据流的线索。

Flux是Facebook提出的一种模式，它试图构建你的应用程序，以便以干净的方式管理数据的变化。

来自Flux文档：

所有数据都通过调度器作为中心集线器进行传输。动作是在动作创建者方法中提供给调度器的，并且通常源于用户与视图的交互。然后，调度器调用存储已向其注册的回调，将操作调度到所有存储。在已注册的回调中，存储会响应与其维护的状态相关的任何操作。然后，存储发出一个更改事件，提醒控制器视图数据层发生了更改。控制器视图侦听这些事件，并从事件处理程序中的存储中检索数据。控制器视图调用它们自己的setState（）方法，从而导致它们自己及其在组件树中的所有子代的重新呈现。

这密集的一段是对你的问题的解决方法的总结。

EDIT：您还可以使用猴面包树，这是一个库，它提供了一个不可变的数据树，当某些字段（或其子字段）更新时，它会发出事件。因此，每个组件都会侦听所需字段的更改。有一个将其与React集成的包。我用过，效果很好。