请教下关于 react 表单处理相关的优化

2022-07-29 09:04:39 +08:00
 zhangleshiye

现在主要是用 ant proform 来处理表单,

table 传进来的 props -> 我重新用[merge,setMerge] =usestate(props)包裹了下 mergeState, 然后在具体的某个定义的 editForm 里进行修改。然后涉及一些表单联动的(改了一个表单的值,影响另一个表单属性),我又写了个 [formState,setFormState]=usestate,主要感觉自己写的怪怪的。

我现在理想的是想写一些 form 的 hooks, {requestForm}=useFormRequest() {props} =useFormColumn() 传到<MyForm props={requestForm} >,苦于不知道如何封装。请教下大佬们哪里有这方面的资料,或者关键词。

1359 次点击
所在节点    前端开发
9 条回复
idealist
2022-07-29 09:24:52 +08:00
我记得 antd 的 Form 不是内部处理状态吗?不需要自己维护状态
happyeveryday
2022-07-29 09:42:49 +08:00
用 ant 那套 form 就不应该自己处理 state 了啊,就算需要关联的改变操作,还是用 form.setFiledValues 去设置呀
hua123s
2022-07-29 09:44:48 +08:00
联动应该用 shouldUpdate => formRef.getFieldFormatValue(namePath) 来获取值,你用法就错了。
zhangleshiye
2022-07-29 10:03:06 +08:00
@hua123s 我试试谢谢
carrymaniac
2022-07-29 10:48:05 +08:00
应该在 Form 的 onChange 去做相对应的处理,使用了 form 表单就不应该用受控组件的写法了
zhangleshiye
2022-07-29 11:11:24 +08:00
@carrymaniac 嗯 我看官方是推荐用 onValueChange 里集中修改 不过感觉使用起来还是很痛啊
jsun969
2022-07-29 18:31:13 +08:00
可以试一下 react hook form 哦
类型安全 很优雅地管理复杂表单
GitHub: https://github.com/react-hook-form/react-hook-form
官网: https://react-hook-form.com/
gouan
2022-08-05 15:15:07 +08:00
@hua123s 其实使用自定义表单控件性能更好点,如果表单比较复杂嵌套,shouldupdate 性能不好,接受 value,onchange,value:{name:'xxxx',useMode:''},你上面的 label 直接{value.name}合同 xxx 。
hua123s
2022-08-05 17:53:31 +08:00
@gouan 新版本有和 react-hook-form 差不多的 api 了,可以不用这些乱七八杂的方法了。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/869375

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX