想做個(gè)修改操作，需要顯示之前的表單值，但是不知道如何組織數(shù)據(jù)結(jié)構(gòu)？如圖：想要實(shí)現(xiàn)效果如下圖，頁面加載就默認(rèn)有兩個(gè)input框并且有兩個(gè)值分別是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)?=>?(
??????<Form.Item????????{...(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"
????????????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?/>,?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進(jìn)行綁定，但一直沒有找到好的解決思路。
添加回答
舉報(bào)
0/150
提交
取消