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

转载于:https://www.cnblogs.com/zhangmingzhao/p/11056042.html