一、情形
最近在處理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）。它至少需要兩個對象作爲參數，第一個參數是目標對象，後面的參數都是源對象。 這樣表格的下拉框就有數據了。
總結：帥帥博主真的厲害！