javascript - 在 React Js 中检索一系列不同子组件的数据的最佳方法

Question

我对 React js 很陌生。搜索了一下，但没有得到这个问题的答案:

假设我的页面中有两个动态输入表，每个都是一个单独的组件。这些线也是不同的组件(React 类)。在页面上，有一个保存按钮。单击保存按钮后，应收集页面的所有信息并将其作为 JSON 字符串推送到服务器。

对我来说最明显的方法是通过 jQuery 收集信息。这肯定会奏效。但这让我觉得这不是做这件事的 react 方式。由于 react 数据是一种方式绑定(bind)，我不太确定如何更恰本地处理这种情况。有什么建议么？

Answer 1

一如既往，有几种方法可以做到这一点。

<强>1。使用refs .

您可以将引用分配给输入字段，然后遍历它们以获取值。这种方法的好处是不需要事件，但您仍然需要以某种方式知道对每个事件的引用。如果您有动态字段或大量嵌套字段，它会增加复杂性。这仍然是我的首选方式，主要是因为您不需要事件(例如 keyup、blur、change，取决于您的使用情况)

<强>2。使用状态

如果值在用户更改字段后立即更新状态，则可以更轻松地立即获取值。显然，您需要知道何时进行了更改，因此您需要事件。

你的事件回调可以做很多事情之一，比如

• 更新全局状态对象(例如通过 redux)
• 通过 context 更新表单的值(或状态)对象用法

我希望这有助于规划您的表格。