V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zhangleshiye
V2EX  ›  前端开发

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

  •  
  •   zhangleshiye · 2022-07-29 09:04:39 +08:00 · 1314 次点击
    这是一个创建于 608 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    9 条回复    2022-08-05 17:53:31 +08:00
    idealist
        1
    idealist  
       2022-07-29 09:24:52 +08:00
    我记得 antd 的 Form 不是内部处理状态吗?不需要自己维护状态
    happyeveryday
        2
    happyeveryday  
       2022-07-29 09:42:49 +08:00
    用 ant 那套 form 就不应该自己处理 state 了啊,就算需要关联的改变操作,还是用 form.setFiledValues 去设置呀
    hua123s
        3
    hua123s  
       2022-07-29 09:44:48 +08:00   ❤️ 1
    联动应该用 shouldUpdate => formRef.getFieldFormatValue(namePath) 来获取值,你用法就错了。
    zhangleshiye
        4
    zhangleshiye  
    OP
       2022-07-29 10:03:06 +08:00
    @hua123s 我试试谢谢
    carrymaniac
        5
    carrymaniac  
       2022-07-29 10:48:05 +08:00
    应该在 Form 的 onChange 去做相对应的处理,使用了 form 表单就不应该用受控组件的写法了
    zhangleshiye
        6
    zhangleshiye  
    OP
       2022-07-29 11:11:24 +08:00
    @carrymaniac 嗯 我看官方是推荐用 onValueChange 里集中修改 不过感觉使用起来还是很痛啊
    jsun969
        7
    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
        8
    gouan  
       2022-08-05 15:15:07 +08:00
    @hua123s 其实使用自定义表单控件性能更好点,如果表单比较复杂嵌套,shouldupdate 性能不好,接受 value,onchange,value:{name:'xxxx',useMode:''},你上面的 label 直接{value.name}合同 xxx 。
    hua123s
        9
    hua123s  
       2022-08-05 17:53:31 +08:00
    @gouan 新版本有和 react-hook-form 差不多的 api 了,可以不用这些乱七八杂的方法了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   965 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 21:15 · PVG 05:15 · LAX 14:15 · JFK 17:15
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.