带有 react-form 库、预填充输入的受控组件答案

【问题标题】：Controlled component with react-form library, pre-filled inputs带有 react-form 库、预填充输入的受控组件
【发布时间】：2018-09-20 06:46:33
【问题描述】：

我正在使用react-form 在基于 Web 的应用程序中构建表单。我也在使用 Redux。

我需要使用这些表单来编辑信息，而不仅仅是输入信息。这使我认为我需要确保表单或输入成为受控组件，从而呈现来自 Redux 存储的值 - 或任何状态数据。

我怎样才能做到这一点？我在他们的文档等中找不到这个。

编辑

react-form 库现已停产，取而代之的是 informed 或 react-final-form 等其他库。

【问题讨论】：

您想在表单中使用默认值吗？之后，所有值都将来自 redux 作为 props。
我希望 react-form 中的默认/初始值来自 redux 道具。就好像我需要编辑一篇博文一样，它必须先在我的表单中呈现该博文的数据。
在这里分享你的reducer代码

标签： reactjs forms redux

【解决方案1】：

react-form 在他们的文档中没有提到这一点的原因是因为没有引用特定于 react-form 的受控组件的实现 - 这意味着您将在 react-form 中以相同的方式创建受控表单组件您可以使用常规的 React 组件，通过将 value 传递给 input/select/etc 组件，确保通过状态更新/操作来管理该值。

正如问题中提到的，图书馆不再维护。

【讨论】：

【解决方案2】：

我对你的项目和这个用例不太了解，但过去我已经将表单的本地状态初始化为之前保存在 Redux 存储中的值。在我们的系统中，对本地状态所做的任何更改都是暂时的（如果离开页面或取消，则会丢失）。直到用户点击保存，Redux 才会与我们的数据库一起更新。

【讨论】：

是的，这就是 react-form 的工作方式——它使用自己的本地状态，在我的实现中，它保存到表单的提交的 redux 存储中。但是，问题是我们如何使用 redux 存储中的数据预先填写表单以编辑该数据。