我出現(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è)參考，也希望大家多多支持腳本之家。

最新評(píng)論