同时使用 Ant Design of React 中 Mention 和 Form

使用场景,在一个列表中,点击每一行会弹出一个表单,通过修改表单数据并提交来修改这一行的数据,其中某个数据的填写需要通过Mention实现动态提示及自动补全的功能。

具体效果为:

遇到的问题:

1、希望所需要的提示和自动补全的内容不同,实际场景类似于ide中函数提示(包含参数和返回值以及用法等提示)和函数补全(只补全函数名)的功能。

Ant Design的Mention组件提供了Nav可以实现这个功能,但是实际使用中发现会报错,经查发现为Ant Design的一个,升级版本解决。

2、然后遇到问题,发现suggestions使用了Nav数组之后,不能通过输入自动动态查询,具体表现为

 

经查原因为,将生成suggestions的计算写到了引用Mention的地方:

const suggestions ='张三 男 18 会计',value:'张三''李四 女 21 审计',value:'李四''王五 男 33 总监',value:'王五'<={{ width: '100%'={ suggestions.map( (x) =>

解决方法,将计算过程提到外面去……

3、点击不同数据行的时候,弹出表单数据不更新,也就是表单的 initialValue 不生效

在 react 生命周期 componentWillReceiveProps(nextProps) 中把 Mention 的数据更新。

需要注意的地方是 Mention 的 value 不是 string,需要在多处通过 toString 和 toContentState 进行转换。

行吧,困扰了两天的bug好像写出来也没什么东西……QAQ怪我蠢……

完整代码:

import React from 'react''antd'==const suggestions =<span style="color: #000000;"> [