13｜Form：Hooks给Form处理带来了哪些新变化？

  <div>  
    <label>Email:</label>  
    <input  
      value={values.email || null}  
      onChange={(evt) => setFieldValue("email", evt.target.value)}  
    />  
  </div>  
  <button type="submit">Submit</button>  
</form>  

);
};

那么，通过将表单状态管理的逻辑提取出来，使之成为一个通用的 Hook，这样我们就简化了在 React 中使用表单的逻辑。

虽然这看上去只是一个很简单的实现，但是基本上一些开源的表单方案都是基于这么一个核心的原理：把表单的状态管理单独提取出来，成为一个可重用的 Hook。这样在表单的实现组件中，我们就只需要更多地去关心 UI 的渲染，而无需关心状态是如何存储和管理的，从而方便表单组件的开发。

处理表单验证

当我们基于 Hooks 实现了一个基本的表单状态管理机制之后，现在，我们就要在这个机制的基础之上，再增加一个表单处理必备的业务逻辑：表单验证。

在考虑这个验证逻辑如何实现的时候，我们同样也是遵循状态驱动这个原则：

1. 首先：如何定义这样的错误状态；
2. 其次：如何去设置这个错误状态。

下面的代码演示了我们如何给已有的 useForm 这个 Hook 增加验证的 API 接口：

// 除了初始值之外，还提供了一个 validators 对象，
// 用于提供针对某个字段的验证函数
const useForm = (initialValues = {}, validators) => {
const [values, setValues] = useState(initialValues);
// 定义了 errors 状态
const [errors, setErrors] = useState({});

const setFieldValue = useCallback(
(name, value) => {
setValues((values) => ({
…values,
[name]: value,
}));

  // 如果存在验证函数，则调用验证用户输入  
  if (validators[name]) {  
    const errMsg = validators[name](./value.md);  
    setErrors((errors) => ({  
      ...errors,  
      // 如果返回错误信息，则将其设置到 errors 状态，否则清空错误状态  
      [name]: errMsg || null,  
    }));  
  }  
},  
[validators],  

);
// 将 errors 状态也返回给调用者
return { values, errors, setFieldValue };
};

那么我们就可以在使用的时候传递下面的 validators 对象给 useForm 这个 Hook：

function MyForm() {
// 用 useMemo 缓存 validators 对象
const validators = useMemo(() => {
return {
name: (value) => {
// 要求 name 的长度不得小于 2
if (value.length < 2) return “Name length should be no less than 2.”;
return null;
},
email: (value) => {
// 简单的实现一个 email 验证逻辑：必须包含 @ 符号。
if (!value.includes(”@")) return “Invalid email address”;
return null;
},
};
}, []);
// 从 useForm 的返回值获取 errors 状态
const { values, errors, setFieldValue } = useForm({}, validators);
// UI 渲染逻辑…
}

这样，我们就将表单验证的逻辑也封装到了通用的 useForm 这个 Hook 中了。

虽然这个 API 只支持通过函数执行进行验证，但是，我们很容易扩展支持更多的类型，比如正则匹配、值范围等等。

总结来说，通过更丰富和更便捷的 API，就可以让验证逻辑的使用更加方便。这个例子完整的可运行代码你也可以通过文末的链接查看，下图显示了实际的执行效果。

常用的 React Form 框架

刚才我们介绍了在 React 中实现表单功能的基本原理，并自己动手实现了一个可重用的 Form 的状态管理机制。虽然看上去有点简单，但其实是完全可以在项目使用的。

不过呢，所有项目的表单处理总体来说都是类似的，自己动手实现，虽然可以更精确地满足项目需要，但也意味着有了额外的工作量。事实上，我们完全可以利用一些开源来实现，比如 antd, formik, react hook form 等等。

虽然各个框架 API 风格上有所差异，但是背后的原理都是类似的：把表单的状态逻辑和 UI 展示逻辑基于 Hooks 进行分离。

接下来，我就简单介绍三个比较主流的表单框架，让你对它们有一个总体的理解，知道他们的特性和优缺点，从而在做技术选型时可以有所参考。这些框架之间也没有绝对的优劣，你可以按照自己的喜好进行选择。

Antd Form

在国内，蚂蚁金服的 Ant.Design 可以说是最主流的 React UI 库。作为面向重交互的企业级软件设计的 UI 库，其表单机制自然也非常强大。所以，如果你用 antd 作为 UI 库，那么几乎一定是使用其自带的表单管理功能了。

和其它表单框架的地方不同的地方就在于，antd 不仅实现了表单的状态逻辑管理，还提供了 UI 层的支持，比如表单如何布局，错误信息如何展示，等等。

当然，这也意味着 Antd Form 只能和 Antd 的 UI 库一起使用。Antd Form 最早是基于高阶组件实现状态逻辑的重用，在 Hooks 出现之后，也基于 Hooks 重构了 Form 的实现。项目的地址是：https://ant.design/components/form/。

Formik

Formik 应该是最早将 React 中的 form 数据逻辑单独提取出来的表单框架，因此它也积累了大量的用户。而且，Formik 出现的时候还没有 Hooks，所以它其实利用的是 render props 设计模式实现了状态逻辑的重用。

典型的 Formik 代码如下：

import { Formik, Form } from ‘formik’;

// …

<Formik
initialValues={{ email: ‘’, password: ’’ }}
validate={values => { }}
onSubmit={(values, { setSubmitting }) => {}}

{({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting,
}) => (