antd From的系列用法

1.表单赋值（表单回显）方法一

定义

  const [formSetting] = Form.useForm();

赋值

useEffect(() => {
    if (editNowData) {
      formSetting.setFieldsValue(
        {
          id: editNowData.id,
          description: editNowData.description,
          link: editNowData.link,
          quantity: editNowData.quantity,
          sort: editNowData.sort,
          type: editNowData.type,
          cover: editNowData.cover,
        }
      )
    }

  }, [editNowData])

form

<Form
            name="basic"
            wrapperCol={{ span: 24 }}
            form={formSetting} //添加这一行
          >
          <Form.Item
              name="description"
              rules={[{ required: true, message: '请输入专题名字' }]}
            >
              <Input placeholder="专题名字" maxLength={isadd ? 30 : 5} />
            </Form.Item>

form.item的name与上面赋值的名称保持一致即可回显

2.表单赋值（表单回显）方法二

3.关于表单对应时间的回显

1.模拟的数据

 csrq: '1992/12/10',

2.引入+定义

 import moment from 'moment';
  //日期格式
  const monthFormat = 'YYYY/MM';
  const dateFormat = 'YYYY/MM/DD';

3.表单回显赋值

formSetting.setFieldsValue(
        {
         csrq: moment(data.csrq, 'YYYY/MM/DD'),
        })

4.下方组件
赋值方式和上方的赋值方式一样，保持对应的form.item的name一致

 <DatePicker format={dateFormat} picker="month" />

4.Form验证

<Form.Item
                      label="身份证号"
                      name="Zjhm"
                      rules={[
                        {
                          required: true,
                          message: "身份证号不能为空！",
                        },
                        {
                          pattern: ,
                          message: "请输入正确格式的身份证号!",
                        },
                      ]}
                    >
                      <Input placeholder="请输入身份证号" />
                    </Form.Item>

5.表单清空

现在我想将输入框的值置空，使用form.resetField