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

情形

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

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

{
                title: '數(shù)據(jù)來源',
                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) {}

生成復(fù)雜數(shù)據(jù)的渲染函數(shù)，參數(shù)分別為當前行的值，當前行數(shù)據(jù)，行索引，@return 里面可以設(shè)置表格行/列合并。

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

解決得問題

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

因為要回顯的數(shù)據(jù) 在arry<Object> 里，而且有childern 項，我先想著怎么循環(huán)拿出來，賦給value，但是均未成功，最后靈光一現(xiàn)。我發(fā)現(xiàn)了問題的所在，每條數(shù)據(jù)在table顯示的時候已經(jīng)循環(huán)過了，問題就在我能不能拿到當前行的數(shù)據(jù)， 能拿到就能拿到當前改下拉框的值，翻一翻api 就什么都有了。record 就是當前的數(shù)據(jù)對象，直接點 屬性就是值。

第二個問題：

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

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

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

拿到對應(yīng)下標后，刪除源數(shù)據(jù)newData下標的數(shù)據(jù)，然后把row加進來，也就是用已經(jīng)改變的row替換之前數(shù)據(jù)的item，也就是splice （）方法的作用，

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

最后把修完的數(shù)據(jù)返回state，頁面重新渲染，把數(shù)據(jù)顯示在表格上。（每改一次，觸發(fā)onChange事件，渲染一次。。。）

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

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

 changeSource =(t,e,r) =>{
        //設(shè)置數(shù)據(jù)的值，用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 是當前的哪行數(shù)據(jù) ，e 當前行數(shù)據(jù)，r，行索引，  assign 是對象屬性的同級拷貝方法，他無法深層次拷貝，但是我夠用了。Object.assign方法用來將源對象（source）的所有可枚舉屬性，復(fù)制到目標對象（target）。它至少需要兩個對象作為參數(shù)，第一個參數(shù)是目標對象，后面的參數(shù)都是源對象。  這樣表格的下拉框就有數(shù)據(jù)了。

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
))}

問題總結(jié)

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

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

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。 

最新評論