想做个修改操作，需要显示之前的表单值，但是不知道如何组织数据结构？
如图：
想要实现效果如下图，页面加载就默认有两个input框并且有两个值分别是1,2
代码地址：https://ant.design/components/form-cn/
代码
```
import { Form, Input, Icon, Button,} from 'antd';let id = 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(id++); // 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])); } }); } 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) => ( {getFieldDecorator(`names[${k}]`, { validateTrigger: ['onChange', 'onBlur'], rules: [{ required: true, whitespace: true, message: "Please input passenger's name or delete this field.", }], })( )} {keys.length > 1 ? ( this.remove(k)} /> ) : null} )); return ( {formItems} Add field Submit ); }}const WrappedDynamicFieldSet = Form.create({ name: 'dynamic_form_item' })(DynamicFieldSet);ReactDOM.render(, mountNode);.dynamic-delete-button { cursor: pointer; position: relative; top: 4px; font-size: 24px; color: #999; transition: all .3s;}.dynamic-delete-button:hover { color: #777;}.dynamic-delete-button[disabled] { cursor: not-allowed; opacity: 0.5;}```
我尝试修改了getFieldDecorator('keys', { initialValue: [] }); 这部分代码，我理解的是它需要和getFieldDecorator(id, options) 中的id进行绑定，但一直没有找到好的解决思路。 |
天盟APP下载
