antd from动态表单输入框默认值（多个）如何设置

Question

1. 用react结合antd组件做了一个项目，在需要动态表单这一块时候，用了antd官网的from动态表单（下图）

（一开始是没有input出现的，点击一下Add field就会出现一个）

2.今天在测试项目的时候，（有添加，列表和编辑页面， 从列表页面点击数据可以进入编辑页面，并且传递你点击的那条数据的所有东西）， 我在测试的时候就发现，动态表单上input的默认值一条数据还可以设置（initialValue），当数据多了的时候，就不行了。

点击Add field的时候，下面的input的默认值也是 张小胖 。
我现在想要实现的功能就是 默认显示两条不一样的数据在input上， 再点击Add field的出现的input是没有默认值的

有没有大佬帮忙解决一下！！！！！！！！！！！急，，，，十万火急
下面这个是官方的代码，我在项目中也是直接拿过来就用的 没有改动
import { Form, Input, Icon, Button } from 'antd';
const FormItem = Form.Item;

let uuid = 0;
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(uuid);
uuid++;
// 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) {
    console.log('Received values of form: ', values);
  }
});

}

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: [] });
const keys = getFieldValue('keys');
const formItems = keys.map((k, index) => {
  return (
    <FormItem
      {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
      label={index === 0 ? 'Passengers' : ''}
      required={false}
      key={k}
    >
      {getFieldDecorator(`names[${k}]`, {
        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"
          disabled={keys.length === 1}
          onClick={() => this.remove(k)}
        />
      ) : null}
    </FormItem>
  );
});
return (
  <Form onSubmit={this.handleSubmit}>
    {formItems}
    <FormItem {...formItemLayoutWithOutLabel}>
      <Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
        <Icon type="plus" /> Add field
      </Button>
    </FormItem>
    <FormItem {...formItemLayoutWithOutLabel}>
      <Button type="primary" htmlType="submit">Submit</Button>
    </FormItem>
  </Form>
);

}
}

const WrappedDynamicFieldSet = Form.create()(DynamicFieldSet);
ReactDOM.render(<WrappedDynamicFieldSet />, mountNode);

Answer 1

第一,FormItem中需要搭配getFieldDecorator一起使用。
第二，所有的FormItem中getFieldDecorator的name不能重复，最好和表单feild名称一样。
第三，动态新增的FormItem，也要确保getFieldDecorator的name不能和以前的重复。
第四，动态新增的FormItem的元素，最好指定惟一的key.比如：<Input key={'only key'} />

Answer 2

请查看博客：https://blog.csdn.net/smk108/... 使用antd form开发支持动态增减表单项，可选有初始值组件的一种实现方式

Answer 3

贴一下代码，之前忘记更新了。
// // 动态表单需要的东西 // 动态表单移除事件
remove = (k) => {

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

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

};
// 动态添加 // 默认显示是没有的 可以在componentDidmount内执行以下add方法，这样可以渲染出一个动态的input
add = () => {

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

};
// render内定义与解析
getFieldDecorator('keys', { initialValue: [] }); // keys 很重要 非常重要

const keys = getFieldValue('keys');
const formItems = keys.map((k, index) => {
  return (
    <FormItem
      // {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
      {...formItemLayout}
      label={index === 0 ? '课程章节' : ''}
      required={false}
      key={k}
    >
      {getFieldDecorator(`names[${k}]`, {     //这里的names是动态渲染数据 表单提交时可以通过names获取到我们添加的数据组成的数组。 也可以通过数组动态渲染数据上来
        validateTrigger: [
          'onChange',
          'onBlur',
        ],
        rules: [
          {
            required: true,
            whitespace: true,
            message: '请输入课程章节.',
          },
        ],
      })(
        <Input
          placeholder="请输入课程章节"
          style={{
            width: '90%',     // 90% 为了input后有一个remove的按钮，input大于等于2个的时候 remove的按钮才会显示
            marginRight: 8,
          }}
        />,
      )}
      {keys.length > 1 ? (
        <Icon
          className="dynamic-delete-button"
          type="minus-circle-o"
          disabled={keys.length === 1}
          onClick={() => this.remove(k)}
        />
      ) : null}
    </FormItem>
  );
});

// 页面使用 render内
<Row>
<Col

 xs={24}
 >
 {formItems}     **// 使用定义的formItems**
 <FormItem>
 <Button
 type="dashed"
 onClick={this.add}
 style={{ width: '100%' }}
 >
   <Icon type="plus" /> 添加章节
 </Button>
</FormItem>

</Col>
</Row>