[JavaScript知识库]React-Antd-表单-表单方法调用

文档地址: 链接.

import { Form, Input, Button, Select, Space } from "antd";

export default function App() {
  const [form] = Form.useForm(); // 创建表单数据域
  return (
    <Form
      form={form}
      onFinish={(values) => {
        console.log(values);
      }}
      onFinishFailed={(errInfo) => {
        console.log(errInfo);
      }}
    >
      <Form.Item
        label="笔记"
        name="note"
        rules={[
          {
            required: true,
            message: "笔记为必填项.",
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        label="性别"
        name="gender"
        rules={[
          {
            required: true,
            message: "性别为必填项.",
          },
        ]}
      >
        <Select
          placeholder="选择一个选项并更改上面的输入文本"
          onChange={(value) => {
            //监听select的改变
            switch (value) {
              case "male":
                form.setFieldsValue({
                  note: "你好，男人",
                });
                break;
              case "female":
                form.setFieldsValue({
                  note: "你好，女人",
                });
                break;
              case "other":
                form.setFieldsValue({
                  note: "男女？",
                });
                break;
              default:
                break;
            }
          }}
        >
          <Select.Option value="male">男性</Select.Option>
          <Select.Option value="female">女性</Select.Option>
          <Select.Option value="other">保密</Select.Option>
        </Select>
      </Form.Item>
      <Form.Item
        // 不带样式，作为纯字段控件使用
        noStyle
        shouldUpdate={(prevValues, currentValues) => {// 表单的每次数值更新都会调用该方法，提供原先的值与当前的值以供你比较是否需要更新
          return prevValues.gender !== currentValues.gender;
        }}
      >
        {(props) => {
          // console.log(props);//{getFieldValue: ?, getFieldsValue: ?, getFieldError: ?, getFieldsError: ?, isFieldsTouched: ?, …}
          // eslint-disable-next-line no-unused-expressions
          // 当前的性别值是不是other
          return props.getFieldValue("gender") === "other" ? (
            <Form.Item
              label="定制性别"
              name="customizeGender"
              rules={[
                {
                  required: true,
                  message:'定制性别为必填项.'
                },
              ]}
            >
              <Input />
            </Form.Item>
          ) : null;
        }}
      </Form.Item>
      <Form.Item>
        <Space>
          <Button type="primary" htmlType="submit">提交</Button>
          <Button
            onClick={() => {
              // 重置一组字段到 initialValues
              form.resetFields();
            }}
          >重置</Button>
          <Button
            onClick={() => {
              // 设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入）
              form.setFieldsValue({
                note: "hello world",
                gender: "other",
              });
            }}
          >填充表单</Button>
          <Button
            onClick={() => {
              // 获取对应字段名的值
              let res = form.getFieldValue();
              console.log(res);//{note: '你好，女人', gender: 'female'}
            }}
          >获取表单值</Button>
        </Space>
      </Form.Item>
    </Form>
  );
}