Antd Form默认值

有2种方式为Form添加默认值：

1. 使用Form的initialValues；
2. 使用Form.Item的initialValue。

两种方式不能同时只用，会有warn提示；
本篇文章主要讲第一种方式：

 productDetail = {
        name: '商品名称',
        description: '商品描述',
        price: '商品价格',
        picList: [
            {path: 'http://firstPicturePath', name: '第一张'},
            {path: 'http://secondPicturePath', name: '第二张'},
            {path: 'http://thirdPicturePath', name: '第三张'}
        ]
    };

import React from 'react';
import {Button, Form, Input} from "antd";
import {MinusCircleOutlined, PlusOutlined} from "@ant-design/icons";
render() {
        return (<div>
            <Form
                initialValues={this.productDetail}>
                <Form.Item label='商品名称' name='name'
                           rules={[{required: true, message: '请输入商品名称'}]}>
                    <Input/>
                </Form.Item>
                <Form.Item label='商品描述' name='description'
                           rules={[{required: true, message: '请输入商品描述'}]}>
                    <Input.TextArea autoSize={{minRows: 2, maxRows: 10}}/>
                </Form.Item>
                <Form.Item label='商品售价' name='price'
                           rules={[{
                               required: true,
                               message: '输入金额必须大于0',
                               pattern: new RegExp(/^[1-9.]\d*$/, 'g'),
                           }]}>
                    <Input prefix='￥'/>
                </Form.Item>
                <Form.List name={'picList'}>
                    {(fields, {add, remove}) => {
                        return (<div>
                            {fields.map((field, index) => {
                                return (<Form.Item
                                    wrapperCol={{offset: index === 0 ? 0 : 8, span: 16}}
                                    label={index === 0 ? '商品图片' : ''}
                                    required={true}
                                    key={index}>
                                    <Form.Item
                                        rules={[{
                                            required: false
                                        }]}
                                        name={[field.name,'path']}
                                        fieldKey={[field.fieldKey,]}
                                        noStyle>
                                        <Input placeholder={'图片地址:'} style={{width: '80%'}}/>
                                    </Form.Item>
                                    {fields.length > 1 ? (
                                        <MinusCircleOutlined
                                            className='dynamic-delete-button'
                                            style={{margin: '0 8px'}}
                                            onClick={() => {
                                                remove(field.name);
                                            }}
                                        />
                                    ) : null}
                                </Form.Item>)
                            })}
                            <Form.Item wrapperCol={{offset: 8, span: 18}}>
                                <Button
                                    type='dashed'
                                    onClick={() => {
                                        add();
                                    }}>
                                    <PlusOutlined/>添加图片地址
                                </Button>
                            </Form.Item>
                        </div>)
                    }}
                </Form.List>
            </Form>
        </div>)
    }

Form中的每一项会根据设定的name从initialValues中获取对应相同key的值，Form.List中会先通过name获取到数据列表，然后Form.Item通过name数组一层一层获取到我们需要到值；在上面到例子里，先通过field.name（数组下标）获取对应到数组对象，再通过下一个name：path获取对应值。

2020-10-08