react ant組件Select下拉框值回顯問(wèn)題

情形

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

先說(shuō)一下 下拉框 在表格 column 的寫法：

{
                title: '數(shù)據(jù)來(lái)源',
                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ù)分別為當(dāng)前行的值，當(dāng)前行數(shù)據(jù)，行索引，@return 里面可以設(shè)置表格行/列合并。

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

解決得問(wèn)題

第一個(gè)問(wèn)題：下拉框的回顯

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

第二個(gè)問(wèn)題：

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

官方的可編輯單元格的保存你輸入的數(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 （ =（）=>{ }） 方法是當(dāng)其中匿名箭頭函數(shù)的方法返回true 的時(shí)候返回已選數(shù)據(jù)在 newData數(shù)組的下標(biāo)，（如果沒找到返回的-1），

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

3個(gè)參數(shù)分別是index，要?jiǎng)h除/添加的下標(biāo)，1，刪除的個(gè)數(shù),{} 在下標(biāo)位置增加的數(shù)據(jù)、

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

這個(gè)方法對(duì)于輸入框 是一點(diǎn)問(wèn)題沒有，但是下拉框就不行了，因?yàn)閞ow對(duì)象拿不到你選得數(shù)據(jù)，input是value屬性，但是下拉框是option 標(biāo)簽，所以即便你怎么選下拉框一直是空。怎么辦，勤勞的人總會(huì)有收獲，這時(shí)我想到 @wslzjr 帥帥博主對(duì)我的鼓勵(lì)：

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

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

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

問(wèn)題描述

在使用Select Option下拉組件時(shí)，map遍歷后不顯示下拉框

錯(cuò)誤寫法：

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

問(wèn)題總結(jié)

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

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

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

最新評(píng)論