我有一个用于创建,读取,更新和删除的表单 . 我创建了3个具有相同形式的组件,但我传递了不同的道具 . 我有CreateForm.js,ViewForm.js(只读取删除按钮)和UpdateForm.js .
我曾经使用PHP,所以我总是以一种形式做这些 .
我使用React和Redux来管理商店 .
当我在CreateForm组件中时,我传递给我的子组件,这使得 createForm={true}
不用输入值填充输入,不要禁用它们 . 在我的ViewForm组件中,我传递了这个道具 readonly="readonly"
.
我有一个textarea的另一个问题,它充满了一个值,并且不可更新 . React textarea with value is readonly but need to be updated
只有一个组件处理表单的这些不同状态的最佳结构是什么?
你有任何建议,教程,视频,演示分享?
4 回答
对于那些想要创建完全受控的表单组件而不使用超大库的人来说,这是另一回事 .
ReduxFormHelper - 一个小的ES6类,少于100行:
它并没有为你完成所有的工作 . 但是,它有助于创建,验证和处理受控表单组件 . 您可以将上述代码复制并粘贴到项目中,或者包含相应的库 - redux-form-helper(插件!) .
如何使用
第一步是将特定数据添加到Redux状态,它将表示我们表单的状态 . 这些数据将包括当前字段值以及表单中每个字段的错误标记集 .
表单状态可以添加到现有的reducer中,也可以在单独的reducer中定义 .
此外,有必要定义启动表单状态更新的特定操作以及相应的操作创建者 .
动作示例:
减速器示例:
第二步也是最后一步是为表单创建一个容器组件,并将其与Redux状态和操作的相应部分相连接 .
我们还需要定义一个表单模型,指定表单字段的验证 . 现在我们将
ReduxFormHelper
对象实例化为组件的成员,并传递我们的表单模型和表单状态的回调调度更新 .然后在组件的
render()
方法中,我们必须分别用processField()
和processForm()
方法绑定每个字段的onChange
和表单的onSubmit
事件,并根据状态中的表单错误标志显示每个字段的错误块 .以下示例使用Twitter Bootstrap框架中的CSS .
容器组件示例:
Demo
我找到了Redux Form包 . 它确实做得很好!
因此,您可以将Redux与React-Redux一起使用 .
首先,您必须创建一个表单组件(显然):
在此之后,您连接处理表单的组件:
并在您的组合减速器中添加redux-form减速器:
验证器模块如下所示:
表单完成后,如果要使用某些值填充所有字段,可以使用
initialize
函数:填充表单的另一种方法是设置initialValues .
如果你有任何其他方法来处理这个,只需留言!谢谢 .
更新:2018年,我只会使用Formik(或类似Formik的库)
还有react-redux-form(step-by-step),这似乎交换了一些redux-form 's javascript (& boilerplate) with markup declaration. It looks good, but I'尚未使用它 .
自述文件中的剪切和粘贴:
./components/my-form-component.js
编辑:比较
react-redux-form文档提供了与redux-form的比较:
https://davidkpiano.github.io/react-redux-form/docs/guides/compare-redux-form.html
对于那些不关心处理表格相关问题的庞大图书馆的人,我建议redux-form-utils .
它可以为表单控件生成值并更改处理程序,生成表单的reducers,方便的动作创建者以清除某些(或所有)字段等 .
您需要做的就是在代码中组装它们 .
通过使用
redux-form-utils
,您最终会得到如下表单操作:但是,这个库只解决问题
C
和U
,对于R
和D
,可能更集成的Table
组件是反对 .