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) => );

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

你可能感兴趣的:(前端&项目,React全家桶)