From表单如何获取默认值

 我们给这两个select下拉框设置默认值，代码如下：

              <Form.Item
                name="name"
                label="所属公司"
                rules={[{ required: true, message: '请选择所属公司' }]}
              >
               <Select defaultValue="jack">
                  <Option value="jack">Jack</Option>
                  <Option value="lucy">Lucy</Option>
                  <Option value="Yiminghe">yiminghe</Option>
                </Select>
              </Form.Item>
              <Form.Item
                name="documentsType"
                label="类型"
                rules={[{ required: true, message: '请选择单据类型' }]}
              >
                <Select defaultValue="Xiaoxiao Fu">
                  <Option value="Xiaoxiao Fu">Xiaoxiao Fu</Option>
                  <Option value="Maomao Zhou">Maomao Zhou</Option>
                </Select>
              </Form.Item>

给他们设置不填写不能提交表单的属性值。然后我们提交表单，会发现无法提交表单。

 打印一下提交内容：

 可以发现这两个字段都是空的。因为我们只给select设置了defaultValue属性，他只会显示在select的默认值上，并不会改变提交的表单的值。如果要改变提交的表单的值那么我们就需要用from表单的initialValue方法。

initialValue='jack'
initialValue='Xiaoxiao Fu'

增加完成后，我们即使不选择也会提交成功

 完整代码如下：

import { PlusOutlined,DownOutlined, UploadOutlined } from '@ant-design/icons';
import { Button, Menu, Tooltip,Col,  DatePicker, message,Upload, Drawer, Form, Input, Select, Space,UploadProps} from 'antd';
import React, { useState } from 'react';
import 'antd/dist/antd.css'
const { Option } = Select;
const APP1: React.FC = () => { 
  const [form] = Form.useForm();
  const onFinish = (values: any) => {
    setVisible(false);
    form.resetFields();//刷新表单
    console.log('Success:', values);

  };
 
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  const [visible, setVisible] = useState(false);
//打开抽屉
  const showDrawer = () => {
    setVisible(true);
  };

  const onClose = () => {
    form.resetFields();
    setVisible(false);
  };
  const { Option } = Select;
  // const handleChange = (value: string) => {
  //   console.log(`selected ${value}`);
  // };
  const props: UploadProps = {
    name: 'file',
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    headers: {
      authorization: 'authorization-text',
    },

    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 文件上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 文件上传失败`);
      }
    },
  };
  return (
    <>
      <Button type="primary" onClick={showDrawer} icon={<PlusOutlined />}>
        新建
      </Button>
      <Drawer
        title="新建"
        width={400}
        onClose={onClose}
        visible={visible}
        bodyStyle={{ paddingBottom: 80 }}
      >
        <Form layout="vertical"
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        form = {form} 
        hideRequiredMark>
              <Form.Item
                name="name"
                label="所属公司"
                rules={[{ required: true, message: '请选择所属公司' }]}
                initialValue='jack'
              >
               <Select defaultValue="jack">
                  <Option value="jack">Jack</Option>
                  <Option value="lucy">Lucy</Option>
                  <Option value="Yiminghe">yiminghe</Option>
                </Select>
              </Form.Item>
              <Form.Item
                name="documentsType"
                label="类型"
                rules={[{ required: true, message: '请选择单据类型' }]}
                initialValue='Xiaoxiao Fu'
              >
                <Select defaultValue="Xiaoxiao Fu">
                  <Option value="Xiaoxiao Fu">Xiaoxiao Fu</Option>
                  <Option value="Maomao Zhou">Maomao Zhou</Option>
                </Select>
              </Form.Item>
              <Form.Item
                name="documentEncoding"
                label="单据编码"
                rules={[{ required: true, message: '请输入单据编码' }]}
              >
                <Input placeholder="请输入单据编码" />
              </Form.Item>
              <Form.Item
                name="description"
                label="单据摘要"
                rules={[
                  {
                    required: true,
                    message: '请输入单据摘要',
                  },
                ]}
              >
                <Input.TextArea rows={4} placeholder="请输入单据摘要" />
              </Form.Item>
            <Form.Item
            name="file"
            label=""
            rules={[
              {
                required: true,
                message: '上传单据附件',
              },
            ]}>
            <Upload {...props} >
                    <Button icon={<UploadOutlined />}
                     type="primary" 
                     style={{
                      marginLeft: '',
                    }}>上传单据附件</Button>
             </Upload>
            </Form.Item>
            <Form.Item>
            <Space>
            <Button onClick={onClose} 
              style={{
                marginLeft: '200px',
              }}>关闭</Button>
            <Button htmlType='submit' 
            type="primary">
              确定
            </Button>
          </Space>
            </Form.Item>
        </Form>
      </Drawer>
    </>
  );
};

export default APP1;