React 使用antd中Form组件的问题与解决

前言：
前端开发工作中，不可避免的会用到React 与Antd的组合使用，并会用到Form表单编辑与使用的问题，此时就会遇到一系列的问题，如form表单中不能使用defaultValue进行默认值赋值，接下来我们来看看如何解决这些问题

一、简单的Form使用（无默认值）

1）创建与使用

• 整体代码

import { Button, Checkbox, Form, Input } from 'antd';
const onFinish = (values) => {
 console.log('Success:', values);
};
const onFinishFailed = (errorInfo) => {
 console.log('Failed:', errorInfo);
};
const App = () => (
 <Form
   name="basic"
   labelCol={{
     span: 8,
   }}
   wrapperCol={{
     span: 16,
   }}
   style={{
     maxWidth: 600,
   }}
   initialValues={{
     remember: true,
   }}
   onFinish={onFinish}
   onFinishFailed={onFinishFailed}
   autoComplete="off"
 >
   <Form.Item
     label="Username"
     name="username"
     rules={[
       {
         required: true,
         message: 'Please input your username!',
       },
     ]}
   >
     <Input />
   </Form.Item>

   <Form.Item
     label="Password"
     name="password"
     rules={[
       {
         required: true,
         message: 'Please input your password!',
       },
     ]}
   >
     <Input.Password />
   </Form.Item>

   <Form.Item
     name="remember"
     valuePropName="checked"
     wrapperCol={{
       offset: 8,
       span: 16,
     }}
   >
     <Checkbox>Remember me</Checkbox>
   </Form.Item>

   <Form.Item
     wrapperCol={{
       offset: 8,
       span: 16,
     }}
   >
     <Button type="primary" htmlType="submit">
       Submit
     </Button>
   </Form.Item>
 </Form>
);
export default App;

2）组件属性与方法解释

• form点击提交完成的方法

const onFinish = (values) => {
  console.log('Success:', values);
};

• form点击提交失败的方法

const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo);// 失败的内容
};

• form属性解释

labelCol: label 标签布局，类型为Object {span: 1 (form所占宽度的24分之一) , offset: 1 (与容器边缘，相距form所占宽度的24分之一) }
wrapperCol: 输入控件布局，类型为Object {span,offset}
initialValues: 表单默认值，只有初始化以及重置时生效，类型为Object
rules={[{// 规则 required: true,// 必选 message: 'Please input your username!',// 未选提示文本 }]}

二、包含Form.List与对象数组嵌套循环的复杂情况

1. Form.List使用规则说明

1. 先在 Form 中的 initialValues 对 Form.List 进行赋值，或使用 Form.List 中的initialValue方法获取初始数组或对象值，再通过name完成内部的Form.Item赋值；如：name={[field.name, 'timers']} , 深层的内容进行处理。
2. 若在Form中已经使用initialValues 赋值，后不建议不能对Form.List使用initialValue进行赋值
3. 若同时在Form中使用initialValues 、Form.List使用initialValue进行赋值 ，将按照Form中的initialValues为准

2.复杂Form代码

const home = ()=>{
    const [formData, setFormData] = useState({
	    object_name: 'object001',
	    options: [
	      {
	        name: '活动1',
	        incream: 10,
	      }, {
	        name: '活动2',
	        incream: 15,
	      },
	    ],
	  });
  	return (
		 <Form
          labelAlign="left"
          name="basic"
          labelCol={{
            span: 5,
          }}
          wrapperCol={{
            span: 18,
          }}
          autoComplete="off"
          initialValues={{
            object_name: formData.object_name || null,
            options: formData.options,
          }}
          onFinish={onFinish}
          colon={false}
        >
          <Form.Item
            label="对象"
            name="object_name"
            labelCol={{
              span: 4, offset: 1
            }}
            wrapperCol={{
              span: 7,
            }}
          >
            <Input placeholder="" />
          </Form.Item>
          <Form.List
            name="options"
          >
            {(fields, { add, remove }) => (
              <>
                {fields.map((field, index) => (
                  <Form.Item
                    key={index}
                    label="活动1"
                    name="project_nr"
                    labelCol={{
                      span: 4, offset: 1
                    }}
                    wrapperCol={{
                      span: 21,
                    }}
                  >
                    <Input.Group>
                      <Row gutter={8} align="middle">
                        <Col span={4}>
                          <Form.Item
                            label="名称"
                            name={[field.name, 'name']}
                            style={{ margin: 0 }}
                          >
                            <Input />
                          </Form.Item>
                        </Col>
                        <Col span={6}>
                          <Form.Item
                            label="增量百分比"
                            name={[field.name, 'incream']}
                            style={{ margin: 0 }}
                          >
                            <Input suffix="%" />
                          </Form.Item>
                        </Col>
                        <Col span={5}>
                          <Button danger type="text" onClick={() => remove()} icon={<DeleteOutlined />} />
                          {index === 0 && (
                            <Button type="link" icon={<PlusOutlined />} onClick={() => add()}>添加活动</Button>
                          )}
                        </Col>
                      </Row>
                    </Input.Group>
                  </Form.Item>
                ))}
              </>
            )}
          </Form.List>
        </Form>
	)
}