Antd动态控制表单项

再来赞一波 antd 简直不要太好用 ♥️

Antd 的 Form 组件出场率还是非常高的，除了常规的表单各项填写并提交外，有些时候需要根据用户的操作对表单项做一些控制，废话不多说直接拿个例子说

import React from 'react';
import { Form, Select, Input } from 'antd';


export default function HomeIndex() {
  const [form] = Form.useForm()
  return (
    <Form form={form}>
      <Form.Item name="is_love" label="是否喜欢">
        <Select placeholder="请选择">
          <Select.Option value="1">是</Select.Option>
          <Select.Option value="0">否</Select.Option>
        </Select>
      </Form.Item>
      <Form.Item noStyle shouldUpdate>
        {({getFieldValue}) =>
          getFieldValue('is_love') === '0' ? (
            <Form.Item name="reason" label="原因">
              <Input placeholder="请输入"/>
            </Form.Item>
          ) : null
        }
      </Form.Item>
    </Form>
  )
}

以上例子会根据用户选择 是否喜欢 项，如果选择 否 则会出现新的表单项。可以看到这里主要使用了 shouldUpdate 属性，默认为 false 。当其值为 true 时则整个表单任何改动都会触发改项的重新渲染，其值也可以为一个函数，例如 shouldUpdate={(p, c) => p.is_love != c.is_love} 则意味着只有 is_love 的值发生变化时才会触发重新渲染。