antd 动态增加表单添加默认值

关键代码如下

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import {
Form, Input, Icon, Button,
} from 'antd';

let id = 2;

class DynamicFieldSet extends React.Component {
remove = (k) => {

const { form } = this.props;
// can use data-binding to get
const keys = form.getFieldValue('keys');
// We need at least one passenger
if (keys.length === 1) {
  return;
}

// can use data-binding to set
form.setFieldsValue({
keys: keys.filter(key => key !== k),
});

}

add = () => {

const { form } = this.props;
// can use data-binding to get
const keys = form.getFieldValue('keys');
const nextKeys = keys.concat({flg:id++,values:''});
// can use data-binding to set
// important! notify form to detect changes
form.setFieldsValue({
  keys: nextKeys,
});

}

handleSubmit = (e) => {

e.preventDefault();
this.props.form.validateFields((err, values) => {
  if (!err) {
    const { keys, names } = values;
    console.log('Received values of form: ', values);
    console.log('Merged values:', keys.map(key => names[key.flg]));
  }
});

}

render() {

const { getFieldDecorator, getFieldValue } = this.props.form;
const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 20 },
  },
};
const formItemLayoutWithOutLabel = {
  wrapperCol: {
    xs: { span: 24, offset: 0 },
    sm: { span: 20, offset: 4 },
  },
};
getFieldDecorator('keys', { initialValue: [{flg:0,values:'1'},{flg:1,values:'10'}] });
const keys = getFieldValue('keys');
const formItems = keys.map((k, index) => (
  <Form.Item
    {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
    label={index === 0 ? 'Passengers' : ''}
    required={false}
    key={index}
  >
    {getFieldDecorator(`names[${k.flg}]`, {
      initialValue: k.values || '',
      validateTrigger: ['onChange', 'onBlur'],
      rules: [{
        required: true,
        whitespace: true,
        message: "Please input passenger's name or delete this field.",
      }],
    })(
      <Input placeholder="passenger name" style={{ width: '60%', marginRight: 8 }} />
    )}
    {keys.length > 1 ? (
      <Icon
        className="dynamic-delete-button"
        type="minus-circle-o"
        onClick={() => this.remove(k)}
      />
    ) : null}
  </Form.Item>
));
return (
  <Form onSubmit={this.handleSubmit}>
    {formItems}
    <Form.Item {...formItemLayoutWithOutLabel}>
      <Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
        <Icon type="plus" /> Add field
      </Button>
    </Form.Item>
    <Form.Item {...formItemLayoutWithOutLabel}>
      <Button type="primary" htmlType="submit">Submit</Button>
    </Form.Item>
  </Form>
);

}
}

const WrappedDynamicFieldSet = Form.create({ name: 'dynamic_form_item' })(DynamicFieldSet);
ReactDOM.render(<WrappedDynamicFieldSet />, document.getElementById('container'));

···

参考文章https://segmentfault.com/q/1010000019019468