最近做自己的一個項目的時候，用到一個自動填充的輸入框，因為前端使用的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”，加上防止“不可預計的錯誤”，只能特殊問題特殊處理了。