问题描述
我一直在尝试找出管理我的 React 表单的最佳方式.我尝试使用 onChange 来触发操作并使用我的表单数据更新我的 redux 存储.我也尝试过创建本地状态，当我的表单被提交时，我会触发和操作并更新 redux 存储.
I have been trying to figure out the best way to manage my react forms. I have tried to use the onChange to fire an action and update my redux store with my form data. I have also tried creating local state and when my form gets submitted I trigger and action and update the redux store.
我应该如何管理我的受控输入状态?
How should i manage my controlled input state?
推荐答案
您可以使用组件自己的状态.然后将该状态作为动作的参数.这几乎就是反应方式".如React 文档中所述.
您还可以查看 Redux 表单.它基本上完成了您所描述的工作，并将表单输入与 Redux State 联系起来.
You can also check out Redux Form. It does basically what you described and links the form inputs with Redux State.
第一种方式基本上意味着您正在手动完成所有操作 - 最大程度的控制和最大程度的样板.第二种方式意味着您让高阶组件为您完成所有工作.然后就是介于两者之间的一切.我看到有多个包可以简化表单管理的特定方面:
The first way basically implies that you're doing everything manually - maximum control and maximum boilerplate. The second way means that you're letting the higher order component do all the work for you. And then there is everything in between. There are multiple packages that I've seen that simplify a specific aspect of form management:
React 表单 -它提供了一堆辅助组件，使表单渲染和验证更加简单.
React Forms -It provides a bunch of helper components to make form rendering and validation more simple.
反应 JSON 架构 -允许从 JSON 模式构建 HTML 表单.
React JSON schema -Allows one to build an HTML form from a JSON schema.
Formsy React -正如描述所说:React JS 的这个扩展旨在成为那个甜蜜点".介于灵活性和可重用性之间."
Formsy React -As the description says: "This extension to React JS aims to be that "sweet spot" between flexibility and reusability."
更新:最近似乎 Redux Form 被替换为:
Update: seems these days Redux Form is being replaced with:
该领域另一个值得一试的重要竞争者是:
And one more important contender in the space that's worth checking out is:
在我的上一个项目中尝试了 React Hook Form - 非常简单，占用空间小，而且工作正常:
Tried out React Hook Form in my last project - very simple, small footprint and just works:
这篇关于我正在使用 Redux.我应该在 Redux 存储中管理受控输入状态还是在组件级别使用 setState?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！