import React from 'react'; import Input from './Input'; import useInput from './useInput'; // 用于验证邮箱的正则表达式 const EMAIL_REG = /\S+@\S+\.\S+/; export default function Form() { const email = useInput({ initValue: '', helperText: '请输入有效的邮箱！', validator: value => EMAIL_REG.test(value), validateTriggers: ['onBlur'], }); const password = useInput({ initValue: '', helperText: '密码长度需要在 6-20 之间！', validator: value => value.length >= 6 && value.length <= 20, validateTriggers: ['onChange', 'onBlur'], }); /** * 判断是否禁用按钮 */ function isButtonDisabled() { // 当邮箱或密码未填写时，或者邮箱或密码输入校验未通过时，禁用按钮 return !email.value || !password.value || email.error || password.error; } /** * 处理表单提交 */ function handleButtonClick() { console.log('邮箱：', email.value); console.log('密码：', password.value); } return ( <div> <Input {...email} label="邮箱" type="email" /> <Input {...password} label="密码" type="password" /> <button disabled={isButtonDisabled()} onClick={handleButtonClick}> 登录 </button> </div> ); }
这里调用了两次 useInput，初始化 email 和 password 表单域数据。
然后使用扩展运算符，把值全部赋给 Input 组件。只用了几行代码就完成了定义初始值和受控组件的绑定，是不是很方便？
当我们输入邮箱的时候，并不会出现校验提示，但是一旦从邮箱输入框失去焦点以后，输入的值就会被校验，并根据校验结果显示相应的提示。而密码输入框，则会在输入的过程中和失焦后都进行校验。
总结
上面这个例子已经可以处理基本的表单验证，至于格式化用户输入的数据以及自定义收集表单域的值的时机等其他需求，我就不再演示了，大家可以自行设计。这也是 Hooks 的特殊之处，它让我们可以更容易的复用逻辑代码，可以根据需要自行编写 custom Hooks。
文章中关于 useInput 的 API 设计只是众多方案中的一种，只是为大家提供一些参考。你也可以把整个表单的状态封装到一个 useForm 方法中，统一管理所有表单域的状态。
希望本文能为大家带来一些关于如何使用 Hooks 的灵感，即使从来没有使用过 Hooks，也强烈建议大家尝试一下。我已经在项目中大量使用 Hooks 了，并且它也为我带来了很好的效果。