From.List用法详解

1.Form.List用法好处：可以使用antd中自带的验证。

2.不可控组件，用法简单

使用栗子：https://codesandbox.io/s/wonderful-lichterman-br63z?file=/index.js:1723-1742

可在form中加入初始值：

Form.List中可以有多个字段，name要定义为

           name={[field.name, "lastName"]}   //第二项是组内设置的name值
           fieldKey={[field.fieldKey, "lastName"]}

      <Form.List name="users">
        {(fields, { add, remove }) => {
          /**
           * `fields` internal fill with `name`, `key`, `fieldKey` props.
           * You can extends this into sub field to support multiple dynamic fields.
           */
          return (
            <div>
              {fields.map((field, index) => (
                <Row key={field.key}>
                  <Col>
                    <Form.Item
                      name={[field.name, "lastName"]}
                      fieldKey={[field.fieldKey, "lastName"]}
                      rules={rules}
                    >
                      <Input placeholder="last name" />
                    </Form.Item>
                  </Col>
                  <Col>
                    <Form.Item
                      name={[field.name, "firstName"]}
                      fieldKey={[field.fieldKey, "firstName"]}
                      rules={rules}
                    >
                      <Input placeholder="first name" />
                    </Form.Item>
                  </Col>
                  <Col flex="none">
                    <MinusCircleOutlined
                      className="dynamic-delete-button"
                      onClick={() => {
                        remove(field.name);
                      }}
                    />
                  </Col>
                </Row>
              ))}
              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => {
                    add();
                  }}
                  style={{ width: "100%" }}
                >
                  <PlusOutlined /> Add field
                </Button>
              </Form.Item>
            </div>
          );
        }}
      </Form.List>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>

3、如何给Form.List添加默认值：（使用initialValues）

<Form form={form} onFinish={onFinish} onFinishFailed={onFinishFailed} initialValues={{
                list: itemList
            }}>
                <h2>优惠方案</h2>
                <Form.List name='list'>
                    {(fields, { add, remove }) => {
                        console.log(fields);
                        return (<div>
                            {fields.map((field, index) => (
                                <div className="row group" key={field.key}>
                                    <Form.Item className='num'
                                        name={[field.name, 'minRange']}
                                        fieldKey={[field.fieldKey, 'minRange']}
                                        rules={[{validator: handleValitorMin} ]}>
                                        <Input placeholder={2} addonAfter="人" type='number' />
                                    </Form.Item>
                                    <span className='row-span'>——</span>
                                    <Form.Item className='num' 
                                        name={[field.name, 'maxRange']}
                                        fieldKey={[field.fieldKey, 'maxRange']}
                                        rules={[{validator: handleValitorMax }]}>
                                        <Input addonAfter='人' type='number' />
                                    </Form.Item>
                                    <span className='row-span'>的团报选手享受</span>
                                    <Form.Item className='num discount'
                                        name={[field.name, 'discount']}
                                        fieldKey={[field.fieldKey, 'discount']}
                                        rules={[{validator: handleValitorDiscount}]}>
                                        <Input addonAfter={selectAfter} placeholder="0-10整数或小数" type='number' />
                                    </Form.Item>
                                    <span className="close-icon">
                                        <CloseCircleFilled
                                            className="dynamic-delete-button"
                                            onClick={() => {
                                                remove(field.name);
                                            }}
                                        />
                                    </span>
                                </div>
                            ))}
                            <Button
                                onClick={handleAddItem}
                                style={{ width: '80px' }}
                            >
                                <PlusOutlined />新增
                            </Button>
                        </div>);
                    }}
                </Form.List>
            </Form>

4、Form.List添加验证：（使用validator，自定义验证）

const handleValitorMax = (rule, value, callback)=>{
        let arr = rule.field.split('.');
        let index = Number(arr[1]) || 0;
        let discountItem = form.getFieldValue('list');
        let prevNum = Number(discountItem[index].minRange) || 2;
        value = Number(value);
        // console.log('max:', arr, prevNum, discountItem);
        if (!value) {
            return  Promise.reject('人数必填');
        }else if(value <= prevNum){
            return Promise.reject('人数要大于最小人数');
        }
        return  Promise.resolve();
    };

5、Form.List自定义添加一项（不使用默认的add方法）

const handleAddItem = ()=>{
        const list = form.getFieldValue('list');
        const nextList = list.concat(discountObj);
        form.setFieldsValue({
            list: nextList,
        });
    };