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

2022-08-03 22:04:16

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

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。

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

目錄

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

情形

解決得問題

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

問題描述

問題總結

熱門文章

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

目錄

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

情形

解決得問題

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

問題描述

問題總結

熱門文章

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