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

Question

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

--- ReqList(显示请求项列表)

------ ReqListHeader(具有列表标题和一些按钮的 div)

------ ReqTable(请求项列表)

--------- ReqRow(一行请求)

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

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

------------ ...中间还有一些组件

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

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

根组件通过 ajax 调用接收数据并调用 setState(data)，按照 React 的标准文档，一切都很好，并且工作正常。我能够显示所有后代组件及其值。

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

• 选项一:我最初想，我只需在其直接所有者中添加一个changeHandler 函数，通过调用setState() 即可。但恐怕我在中层组件中引入状态会破坏单向数据流原则。

• 选项 II:我是否应该将一个changeHandler回调作为属性从“ReqRow”组件一直传递到ReqEditor，以便它可以绑定(bind)到textArea更改事件？

• 选项 III:或者我应该从层次结构的根部开始，即 ReqList？这是因为，即使 ReqRow 也从其所有者和父级等处接收数据，因为那是数据的入口点。

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

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

Answer 1

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

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

来自Flux documentation :

All data flows through the dispatcher as a central hub. Actions are provided to the dispatcher in an action creator method, and most often originate from user interactions with the views. The dispatcher then invokes the callbacks that the stores have registered with it, dispatching actions to all stores. Within their registered callbacks, stores respond to whichever actions are relevant to the state they maintain. The stores then emit a change event to alert the controller-views that a change to the data layer has occurred. Controller-views listen for these events and retrieve data from the stores in an event handler. The controller-views call their own setState() method, causing a re-rendering of themselves and all of their descendants in the component tree.

这个密集的段落总结了您的问题的解决方案。

<小时/>

编辑:您还可以使用 baobab ，一个提供不可变数据树的库，当某些字段(或其子字段)更新时，该数据树会发出事件。因此每个组件都会监​​听其所需字段的变化。有一个package for integrating it with React 。我用过，效果很好。