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”，加上防止“不可预计的错误”，只能特殊问题特殊处理了。