react?ant組件Select下拉框值回顯的問題怎么解決

這篇文章主要介紹“react ant組件Select下拉框值回顯的問題怎么解決”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“react ant組件Select下拉框值回顯的問題怎么解決”文章能幫助大家解決問題。

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 標簽，所以即便你怎么選下拉框一直是空。

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

 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()函數內使用大括號{}會識別成函數從而不會渲染到頁面上，小括號內的內容會識別成代碼塊正常渲染 

關于“react ant組件Select下拉框值回顯的問題怎么解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。