亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

react 的antd 動態增加表單添加默認值

react 的antd 動態增加表單添加默認值

努力奔跑的自己 2019-04-28 22:47:00
想做個修改操作,需要顯示之前的表單值,但是不知道如何組織數據結構?如圖:想要實現效果如下圖,頁面加載就默認有兩個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)?=>?( ??????<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進行綁定,但一直沒有找到好的解決思路。
查看完整描述

2 回答

  • 2 回答
  • 0 關注
  • 8821 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號