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