antd中AutoComplete組件的一些問題

最近作本身的一個項目的時候，用到一個自動填充的輸入框，由於前端使用的antd，天然就引入了antd中的AutoComplete的組件。

官網連接：連接

AutoComplete的填充數據有兩種用法，一種是dataSouce，另一種是option，運用option更靈活，能夠渲染出本身想要的選擇填充數據的樣式。

因爲選擇的填充數據是扒的別人的接口，這個接口返回的我想要的數據是帶html標籤的字符串，react裏面把html字符串轉義成dom的是

給div帶上dangerouslySetInnerHTML={{__html: v}}的參數。設置成這樣後，在AutoComplete選擇數據後填充的倒是[object Object]，由於antd的這個組件選擇要填充的數據後默認爲Option的子元素，顯然如今加上一個轉義html的div後，Option的子元素再也不是text文本而是一個dom對象了。

這時候AutoComplete提供了optionLabelProp這個參數，這個參數的功能爲回填到選擇框的 Option 的屬性值，默認是 Option 的子元素。沒看懂官方後面說的這個「好比在子元素須要高亮效果時，此值能夠設爲 value。」。但通過我測試，這個參數的string類型的值對應到爲Option組件的參數值。意思就是，好比我給這個Option掛了一個text參數，那麼在AutoComplete的optionLabelProp參數設置爲"text"時，回填到選擇框的值即爲text參數的值。

const children = result.map((v,k) => <Option key={k} text={this.tools(v)}><div dangerouslySetInnerHTML={{__html: v}}></div></Option>);

so，如上面，本身再寫一個正則表達式便可把帶html的標籤字符串過濾掉，回填到選擇框，還能在選擇框的選擇填充數據上用dangerouslySetInnerHTML渲染出樣式。

以後又出現了一個問題，我想監聽onSelect選擇的值，這個onSelect的默認值官方解釋爲：

我給Option設置了value參數後出現了報了react same key的警告，那key參數是幹嗎的？key參數確實沒重複的，（value參數設置的數據裏面確實有重複的）有點疑問，這個問題提了issue，以後看看源碼應該就能明白。
固然以後我就去除了這個value參數，把數組數據提早保存在state中，onselect的默認參數結果就是Option的key值，後面就用這個key獲取到我想要的數據了。

（注意dangerouslySetInnerHTML的數據源應爲淨化後的數據，命名本來就是提醒XSS攻擊的，在tools函數中也應該加上轉義危險符號的功能）
這幾天儘快想把這個項目上線，在入職以前搞定。下次這篇博客更新就是剖析antd源碼中這個AutoComplete的設計。
------一天後----
so，給倉庫提了issue以後偏右大大給了以前討論過這個問題issue的連接，AutoComplete的option貌似和其餘組件的option是同樣的。
連接
主要緣由可能就是「目前沒有優雅的辦法去傳遞 Option 的 key 給 MenuItem」，加上防止「不可預計的錯誤」，只能特殊問題特殊處理了。