最近做自己的一個項目的時候，用到一個自動填充的輸入框，因爲前端使用的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的設計。