關於react ant 組件 Select下拉框 值回顯的問題

Posted on by

react ant組件Select下拉框值回顯問題

情形

最近在處理react 頁面的時候遇到瞭一個問題：使用ant 的table組件，裡面的可編輯單元格類型，但是 我的數據 有一個下拉框在表格中，因為可編輯的table 組件默認單元格是 input輸入框，所以下拉框根本就拿不到值，顯示不上。

先說一下 下拉框 在表格 column 的寫法：

{
                title: '數據來源',
                dataIndex: 'dataSource',
                key: 'dataSource',
                render: (text, record, idx) => {
                    return (
 
                            <Select
                                style={{ width: 200 }}
                                id="dataSource"
                                onChange={this.changeSource.bind(text,record,idx)}
                                value={record.dataSource}
                            >
                                {this.state.itemsValue.map(item => (
                                    <Option key={item.seKey}>{item.seValue}</Option>
                                ))}
 
                            </Select> 
                    )
                },
                width: 300,
                editable: false
},

主要是reade 的寫法，官方api上上這麼描述的，

 render            Function(text, record, index) {}

生成復雜數據的渲染函數，參數分別為當前行的值，當前行數據，行索引，@return 裡面可以設置表格行/列合並。

代碼中： this.state.itemsValue 是下拉框的所有數據，value  是 下次進入頁面需要 回顯的值，為瞭這個回顯的值，我忙活瞭近倆小時。

解決得問題

第一個問題：下拉框的回顯

因為要回顯的數據 在arry<Object> 裡，而且有childern 項，我先想著怎麼循環拿出來，賦給value，但是均未成功，最後靈光一現。我發現瞭問題的所在，每條數據在table顯示的時候已經循環過瞭，問題就在我能不能拿到當前行的數據， 能拿到就能拿到當前改下拉框的值，翻一翻api 就什麼都有瞭。record 就是當前的數據對象，直接點 屬性就是值。

第二個問題：

下拉框選中值後如何在 可編輯的表格上顯示：

官方的可編輯單元格的保存你輸入的數據到表格的方法是這樣的：

handleSave = row => {
    const newData = [...this.state.dataSource];
    const index = newData.findIndex(item => row.key === item.key);
    const item = newData[index];
    newData.splice(index, 1, {
      ...item,
      ...row,
    });
    this.setState({ dataSource: newData });
  };

其中，row是你輸入數據的那行數據，newData 是表格中所有數據，數組.findIndex （ =（）=>{ }） 方法是當其中匿名箭頭函數的方法返回true 的時候返回已選數據在 newData數組的下標，（如果沒找到返回的-1），

拿到對應下標後，刪除源數據newData下標的數據，然後把row加進來，也就是用已經改變的row替換之前數據的item，也就是splice （）方法的作用，

3個參數分別是index，要刪除/添加的下標，1，刪除的個數,{} 在下標位置增加的數據、

最後把修完的數據返回state，頁面重新渲染，把數據顯示在表格上。（每改一次，觸發onChange事件，渲染一次。。。）

這個方法對於輸入框 是一點問題沒有，但是下拉框就不行瞭，因為row對象拿不到你選得數據，input是value屬性，但是下拉框是option 標簽，所以即便你怎麼選下拉框一直是空。怎麼辦，勤勞的人總會有收獲，這時我想到 @wslzjr 帥帥博主對我的鼓勵：

我感覺瞬間充滿瞭力量，沒什麼是加班解決不瞭的，如果有，那就班加的不夠。 我的想法是這樣的，對於下拉框，我自己拿值，自己替換數據，然後讓頁面重新渲染，不走官方的方法不就行瞭。於是我自己寫瞭一套，

 changeSource =(t,e,r) =>{
        //設置數據的值，用this.setState({})
        let row = t;
        const {
            fieldName,
            fieldDesc,
            dataType,
            fieldLength,
            dataSource,
            fieldValue,
            required,
            validRule
 
        } = row;
        row.dataSource=r;
        let { rootNodesMap } = this.state;
        Object.assign(rootNodesMap[row.id], row);
        this.setState({ rootNodes: this.state.rootNodes });
        this.updateDataSource(this.state.rootNodes);
    }

其中，t 是當前的哪行數據 ，e 當前行數據，r，行索引，  assign 是對象屬性的同級拷貝方法，他無法深層次拷貝，但是我夠用瞭。Object.assign方法用來將源對象（source）的所有可枚舉屬性，復制到目標對象（target）。它至少需要兩個對象作為參數，第一個參數是目標對象，後面的參數都是源對象。  這樣表格的下拉框就有數據瞭。

react ant-design Select組件下拉框map不顯示

問題描述

在使用Select Option下拉組件時，map遍歷後不顯示下拉框

錯誤寫法：

{dataList && dataList.map(item =>{(
<Option key={item.id} value={item.value}>{item.value}</Option
)})}

正確寫法：

{dataList && dataList.map(item =>(
<Option key={item.id} value={item.value}>{item.value}</Option
))}

問題總結

主要是es6箭頭函數寫法的問題，當需要在嵌套中寫入HTML代碼時，箭頭函數後邊不需要加大括號{}，直接用小括號()即可

在render()函數內使用大括號{}會識別成函數從而不會渲染到頁面上，小括號內的內容會識別成代碼塊正常渲染 

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。 

推薦閱讀：