13|Form:Hooks 给 Form 处理带来了哪些新变化?
王沛
你好,我是王沛。今天我们来聊聊如何在 React 中使用表单。
表单作为用户交互最为常见的形式,但在 React 中实现起来却并没有那么容易。甚至可以说,使用表单,是 React 开发中最为困难的一部分。
主要有两方面的原因。一方面,React 都是状态驱动,而表单却是事件驱动,比如点击按钮、输入字符等,都是一个个离散的事件。因此,一般来说我们都需要将这些独立的事件转换成一定的应用程序状态,最终来完成表单的交互。
另一方面,表单元素一般都有自己的内在状态,比如原生的 input 节点就允许用户输入,这就需要我们在元素状态和表单状态之间做同步。
要能够很好地处理这些问题,我们首先需要对表单的机制有深入的理解,然后再从 React Hooks 的角度去思考问题的解决方案。
所以在今天这节课,我会从这三个方面来讲。
首先,介绍 React 中使用表单的基本原理,帮助你理解受控组件和非受控组件的概念,以及各自的适用场景。
然后看看 Hooks 出现后,给表单处理带来了哪些思路上的新变化。
最后,我们会学习几个常见的开箱即用的 React 表单解决方案,让你在理解实现原理的基础上,可以选择最适合自己的开源方案。
在表单中使用 React 组件:受控组件和非受控组件
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
React Hooks给表单处理带来了新变化,本文从React中使用表单的基本原理出发,介绍了受控组件和非受控组件的概念及其适用场景。针对受控组件可能存在的性能问题,提出了使用非受控组件的解决方案。随后,文章探讨了如何使用Hooks简化表单处理,通过提取表单状态管理逻辑成为可重用的Hook,简化了在React中使用表单的逻辑。这一核心原理也是一些开源表单方案的基础。文章还介绍了如何在使用Hooks的基础上增加表单验证的业务逻辑,并对常用的React Form框架进行了简要介绍,包括Antd Form、Formik和React Hook Form。这些框架都基于Hooks实现了表单状态管理,但在UI展示逻辑和验证逻辑上有所不同。通过本文的总结,读者能够快速了解React中表单处理的基本原理、受控组件和非受控组件的区别以及使用Hooks简化表单处理的方法,同时对比了几种主流的React Form框架,为读者在实际项目中的技术选型提供了参考。
仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《React Hooks 核心原理与实战》,新⼈⾸单¥59
《React Hooks 核心原理与实战》,新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(9)
- 最新
- 精选
- H置顶1,reset直接使用setState就行。 2,可以对该API自定义一个hook,在该hook初始化一个success和warn,用于提示用户处理结果信息, 在useCallback中处理发送请求的逻辑,useCallback依赖于外界name。 若服务器无此name值,则提示用户 操作成功,且清空表单数据。 若服务器有此name值,则向用户发出警告, 将此hook引入到useForm钩子中,在setFieldValue进行setValues之前,进行接口查询操作!2021-07-0319
- Change请教老师个问题,在ants 中,Form.List如何嵌套From.List,以及实现思路是怎样的。现在有个问题就是根据Form.List里的不同值显示不同的组件内容,涉及到多层Form.List的嵌套
作者回复: 建议可以到 antd repo 的 issues 中问这个问题。
2021-07-12 - Geek_fcdf7b没有formily吗?2022-08-20归属地:重庆1
- Geek_a77079老师,validators条件判断中如果以来fieldValues中的值该怎么处理?没有思路,在useMemo中加入以来会存在未定义先引用的bug提示2021-12-1521
- Free fallconst setFieldValue = useCallback( (key, value) => { setValues((values) => ({ ...values, [key]: value, })) if (validators[key]) { validators[key](value).then((res) => { setErrors((errors) => ({ ...errors, [key]: res, })) }) } }, [validators], ) const reset = useCallback(() => { setValues(initialValues) }, [initialValues])2021-06-271
- Geek_ad92ae老师,你好。在用户二次修改表单时,一般需要通过网络请求历史的表单数据进行初始化,这种情况是不是可以把网络请求和数据初始化的逻辑封装在useform里面?2021-06-2411
- siegfriedsandbox是不是被删除了?2022-04-171
- Wizard可以用lodash的debounce讓用戶輸入完成後500ms才檢查是否有錯誤 將範例修改成下面這樣就行了 import _ from "lodash" const validateDebounceFunction = useCallback( _.debounce((name, value) => { if (validators[name]) { const errMsg = validators[name](value); setErrors((errors) => ({ ...errors, [name]: errMsg || null })); } }, 500), [validators] ); const setFieldValue = useCallback( (name, value) => { setValues((values) => ({ ...values, [name]: value })); validateDebounceFunction(name, value); }, [validateDebounceFunction] );2021-09-03
- 傻子来了快跑丶虽然这个 API 只支持通过函数执行进行验证,但是,我们很容易扩展支持更多的类型,比如正则匹配、值范围等等,这个能演示一下吗2021-07-01
收起评论