前言

因为最近在学其他东西，今天文章会记录的比较水，后续有空了会不断补充内容。

---

功能的实现尽量先看看antd上是否已经提供

在做表单的很多时候，我都是从antd上把其中一个form组件例子复制下来，然后再看看提供了哪些api就开干了。

这样做其实会忽略很多细节方面的东西，比如我想在rules校验的时候拿到其他item的值，可能会通过form的实例调用getFieldValue，但其实在rules的使用中已经默认传入了该方法：

rules={[
  ({ getFieldValue }) => ({
    validator(_, value) {
      // 可以通过getFieldValue('password')获取对应其他item的值
    },
  }),
]}

类似的例子还有很多，所以有些需要的功能其实你细看整个form组件的页面说明后，说不定就给你找到了你想要的。

这里提供一个注册表单的例子，里面很多小细节可以注意下，没准你还有新发现：

<Form labelCol={{ span: 6 }} wrapperCol={{ span: 16 }} onFinish={onFinish}>
  <Form.Item
    label="用户名"
    name="username"
    rules={[
      { required: true, message: '请输入用户名' },
      { type: 'string', min: 5, max: 20, message: '字符长度在 5-20 之间' },
      { pattern: /^\w+$/, message: '只能是字母数字下划线' },
    ]}
  >
    <Input />
  </Form.Item>
  <Form.Item
    label="密码"
    name="password"
    rules={[{ required: true, message: '请输入密码' }]}
  >
    <Input.Password />
  </Form.Item>
  <Form.Item
    label="确认密码"
    name="confirm"
    dependencies={['password']} // 依赖于 password ，password 变化，会重新触发 validator
    rules={[
      { required: true, message: '请输入密码' },
      ({ getFieldValue }) => ({
        validator(_, value) {
          if (!value || getFieldValue('password') === value) {
            return Promise.resolve()
          } else {
            return Promise.reject(new Error('两次密码不一致'))
          }
        },
      }),
    ]}
  >
    <Input.Password />
  </Form.Item>
  <Form.Item label="昵称" name="nickname">
    <Input />
  </Form.Item>
  <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
    <Space>
      <Button type="primary" htmlType="submit">
        注册
      </Button>
      <Link to={LOGIN_PATHNAME}>已有账户，登录</Link>
    </Space>
  </Form.Item>
</Form>

其实不仅仅是表单组件，其他组件也是一样的道理，所以建议没事可以多去antd上翻翻，留下些功能整体印象

---

当一个页面有多个表单组件时，就要优先考虑把值存在状态管理中

这种场景太常见了，一个页面有多个表单组件。我看很多时候大家都是把每个组件的数据状态维护在各自的组件中，其实不太好。

• 指不定你下个页面还可以返回上一步的表单填写页，如果都把数据统一放在状态管理维护，回显就很容易了。
• 各个表单组件可能是会联动的，例如a组件的某个item的值会改变b组件的一些item的显隐，有状态管理就比较容易去做。

---

如果一些表单比较简单且能确保后续不会有功能上的拓展，可以使用业务组件

例如后台管理的一些列表搜索页的搜索表单区域，这种一般就不会做的很复杂，很适合用业务组件。

但当你觉得某个表单现在看来简单，但以后被改复杂的可能性很大时，就不要考虑使用业务组件了。

代码后续补充

---

推荐其他的表单库

react-hook-form，formik，这俩个都很强大，但是其实antd提供的表单已经能满足大部分的需求了。

---