React Hooks 核心原理与实战
王沛
eBay 中国研发中心资深技术专家
10740 人已学习
新⼈⾸单¥59
登录后,你可以任选2讲全文学习
课程目录
已完结/共 25 讲
React Hooks 核心原理与实战
15
15
1.0x
00:00/00:00
登录|注册

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
立即购买
登录 后留言

全部留言(9)

  • 最新
  • 精选
  • H
    置顶
    1,reset直接使用setState就行。 2,可以对该API自定义一个hook,在该hook初始化一个success和warn,用于提示用户处理结果信息, 在useCallback中处理发送请求的逻辑,useCallback依赖于外界name。 若服务器无此name值,则提示用户 操作成功,且清空表单数据。 若服务器有此name值,则向用户发出警告, 将此hook引入到useForm钩子中,在setFieldValue进行setValues之前,进行接口查询操作!
    2021-07-03
    1
    9
  • 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-15
    2
    1
  • Free fall
    const 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-27
    1
  • Geek_ad92ae
    老师,你好。在用户二次修改表单时,一般需要通过网络请求历史的表单数据进行初始化,这种情况是不是可以把网络请求和数据初始化的逻辑封装在useform里面?
    2021-06-24
    1
    1
  • siegfried
    sandbox是不是被删除了?
    2022-04-17
    1
  • 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
收起评论
显示
设置
留言
9
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部