解決ant Design中Select設(shè)置initialValue時(shí)的大坑
我出現(xiàn)的問題:例如在編輯活動(dòng)關(guān)聯(lián)紅包的時(shí)候,需求是select顯示的是紅包名稱,但是表單提交的時(shí)候是紅包ID:設(shè)置默認(rèn)值的initialValue為Id的時(shí)候,會(huì)出現(xiàn)顯示是id (需要的是顯示名稱);如果設(shè)置默認(rèn)值initialValue是名稱,那么下一步操作會(huì)出現(xiàn)報(bào)錯(cuò)
但是我還有一種情況:某個(gè)活動(dòng)關(guān)聯(lián)的紅包被刪除了,在Select中的可供選項(xiàng)中redPackets沒有這個(gè)紅包的時(shí)候,顯示的會(huì)是紅包id,而不是紅包名稱
錯(cuò)誤效果圖:
期待正確效果圖
解決方案:在默認(rèn)值的后面加上一個(gè)空字符串進(jìn)行轉(zhuǎn)換;
<FormItem {...formItemLayout} label="活動(dòng)紅包"> {getFieldDecorator("redPacketId", { rules: [{ required: true, message: "紅包必填" }], initialValue: redPacketId + "" })( <Select> {redPackets.map(rp => ( <Option key={rp.redPacketCommonId}>{rp.packetName}</Option> ))} </Select> )} </FormItem>
補(bǔ)充知識(shí):ant 組件initialValue 初始值更新問題,setState和setFieldValue淺談
組件被賦初始值了之后,有兩種情況需要更新組件的value,一種情況是子組件觸發(fā)的父組件的value的更新,另一種是父組件自己觸發(fā)的value更新。
實(shí)現(xiàn)場景
在門票訂購頁面引入了一個(gè)游客信息子組件,如下圖所示,可以通過子組件新增游客或刪除游客來改變訂購數(shù)量,也可以通過在訂購頁面批量導(dǎo)入游客來改變訂購數(shù)量。
<FormItem {...formItemLayout} label="數(shù)量"> { getFieldDecorator('number', { rules: [{ required: true, message: '數(shù)量', }], initialValue: this.state.peopleNum })(<InputNumber disabled={true} style={{ width: 120, height: 33 }} onChange={this.peopleNumChange} />) } </FormItem>
起初若是子組件觸發(fā)的更改就調(diào)用父組件的回調(diào)函數(shù),函數(shù)中使用this.setState({peopleNum})的方法來更新,若是父組件自己觸發(fā)的更改就直接調(diào)用this.setState({peopleNum})來更新InputNumber的值,后來發(fā)現(xiàn)state的值更新了,但是并沒有改變InputValue的值,因此就通過 setFieldsValue來解決該問題,發(fā)現(xiàn)setFieldsValue直接設(shè)置值 比this.setState設(shè)置initialvalue的等級(jí)更高一點(diǎn)。
peopleNumChange = (value) => { const { setFieldsValue } = this.props.form; this.setState({ peopleNum: value, }); this.props.form.setFieldsValue({ number: value, }) }
ant 自己封裝的table組件initialValue 初始值更新問題
實(shí)現(xiàn)場景
在門票訂購頁面引入了一個(gè)游客信息子組件,如下圖所示,可以通過子組件新增游客或刪除游客來直接改變子組件中游客信息,也可以通過批量導(dǎo)入游客信息的方式間接改變子組件中游客信息。最后父組件獲取到全部游客信息在提交給后臺(tái)。
<div style={{ marginTop: 20 }}> {getFieldDecorator('info', { initialValue: this.state.info, } )(<OrderPeople handlepeople={this.peopleNumChange.bind(this)} handlecantact={this.cantactNumChange.bind(this)} />)} </div>
OrderPeople為封裝的子組件,組件內(nèi)部有兩個(gè)函數(shù),保存函數(shù)和刪除函數(shù),這兩個(gè)函數(shù)對(duì)表格數(shù)據(jù)進(jìn)行更改之后要更新父組件中的游客信息,此時(shí)父組件會(huì)向子組件自動(dòng)傳遞一個(gè)onChange函數(shù),使用onChange函數(shù)來更新父組件的Value值,這里內(nèi)部實(shí)現(xiàn)是用的setFieldValue改變組件的值
remove(key) { const newData = this.state.data.filter(item => item.key !== key); this.setState({ data: newData }); this.props.onChange(newData); }
在組件外部進(jìn)行批量導(dǎo)入的時(shí)候,對(duì)info數(shù)據(jù)進(jìn)行修改,起初數(shù)據(jù)改變之后,在父組件中嘗試setState發(fā)現(xiàn)無效,后改成setFieldsValue才生效,組件的值通過setFieldValue置了某個(gè)值之后,就不能通過setState改變initialValue來改變其值了。
for (var i = 0; i < data.length; i++) { data[i].key = `NEW_Excel_ID_${i}`; } this.setState({ info: data, }); setFieldsValue({ info: this.state.info, });
注意:initialValue設(shè)置的值本應(yīng)該屬于Select可供選的數(shù)據(jù)中某一個(gè),select框顯示的內(nèi)容就是我們所希望的紅包名稱,提交form表單的時(shí)候,值就是Id;如果設(shè)置的值在Select可供選數(shù)據(jù)中找不到(例如:這里的select可供選數(shù)據(jù)是redPackets),那么顯示的就是Id而不是名稱。
所以我們在設(shè)置initialValue的時(shí)候,應(yīng)該填寫的是下拉列表中包含option的value的值。
以上這篇解決ant Design中Select設(shè)置initialValue時(shí)的大坑就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
在vue項(xiàng)目中(本地)使用iconfont字體圖標(biāo)的三種方式總結(jié)
這篇文章主要介紹了在vue項(xiàng)目中(本地)使用iconfont字體圖標(biāo)的三種方式總結(jié),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09Vue2.x Todo之自定義指令實(shí)現(xiàn)自動(dòng)聚焦的方法
我們希望用戶雙擊 todo 進(jìn)入編輯狀態(tài)后輸入框自動(dòng)獲取焦點(diǎn),而不是需要先手動(dòng)點(diǎn)一下。這篇文章主要介紹了Vue 2.x Todo之自定義指令實(shí)現(xiàn)自動(dòng)聚焦,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2019-01-01ElementUI+命名視圖實(shí)現(xiàn)復(fù)雜頂部和左側(cè)導(dǎo)航欄
本文主要介紹了ElementUI+命名視圖實(shí)現(xiàn)復(fù)雜頂部和左側(cè)導(dǎo)航欄,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04Vue項(xiàng)目中Websocket的使用實(shí)例
WebSocket就誕生了,它最大特點(diǎn)就是服務(wù)器可以主動(dòng)向客戶端推送信息,客戶端也可以主動(dòng)向服務(wù)器發(fā)送信息,是真正的雙向平等對(duì)話,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中Websocket使用的相關(guān)資料,需要的朋友可以參考下2023-02-02vue點(diǎn)擊彈窗自動(dòng)觸發(fā)點(diǎn)擊事件的解決辦法(模擬場景)
本文通過案例場景給大家介紹vue點(diǎn)擊彈窗自動(dòng)觸發(fā)點(diǎn)擊事件的解決辦法,通過兩種方法給大家分享vue 自動(dòng)觸發(fā)點(diǎn)擊事件的處理方法,對(duì)vue自動(dòng)觸發(fā)點(diǎn)擊事件相關(guān)知識(shí)感興趣的朋友一起看看吧2021-05-05Vue組件間的通信pubsub-js實(shí)現(xiàn)步驟解析
這篇文章主要介紹了Vue組件間的通信pubsub-js實(shí)現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-03-03vue數(shù)據(jù)更新但視圖(DOM)不刷新的幾種解決辦法
這篇文章主要給大家介紹了關(guān)于vue數(shù)據(jù)更新但視圖(DOM)不刷新的幾種解決辦法,我們在開發(fā)過程中經(jīng)常會(huì)碰到數(shù)據(jù)更新,但是視圖并未改變的情況,需要的朋友可以參考下2023-08-08Vue中的transition封裝組件的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue中的transition封裝組件的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08