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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

具体效果为：

遇到的问题：

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

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

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

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

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

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

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

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

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

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

完整代码：

import React from 'react';
import { Table, Icon, Button, Form, Input, Modal, Mention } from 'antd';
const FormItem = Form.Item;
const { toString, toContentState, Nav } = Mention;const suggestions = [
<Nav children='张三男 18 会计' value='张三' />,
<Nav children='李四女 21 审计' value='李四' />,
<Nav children='王五男 33 总监' value='王五' />
]class EditForm extends React.Component {
onSave = () => {
this.props.form.validateFields((err, values) => {
if (!err) {
this.props.onSave({ ...values, person: toString(values.person) })
this.props.form.resetFields()
this.props.form.setFieldsValue({person: toContentState('')})
console.log(toString(this.props.form.getFieldValue('person')))
}
});
}
onCancel = () => {
this.props.onCancel()
// 重置为初始值 initialValue 防止点击不同区域出现数据不刷新的情况(although...i dont know why...
this.props.form.resetFields()
}
// 在接受 props 时调用无论 nextProps 和 this.props 是否相等
// 首先要在表单隐藏变为显示的时候赋值其次只有当前已经存在显示值的时候才调用否则没意义也会存在 getFiledsValue 未注册情况
componentWillReceiveProps(nextProps) {
if (nextProps.visible === true && this.props.visible === false && this.props.record) {
this.props.form.setFieldsValue({person: toContentState(nextProps.record.person)})
}
}
render() {
// console.log(this.props)
const { record, visible, onCancel } = this.props;
if (!record) return null;
const { getFieldDecorator } = this.props.form;
return (
<Modal
visible={visible}
title="编辑事件"
okText="保存"
onCancel={this.onCancel}
onOk={this.onSave}
>
<Form layout="vertical" onSubmit={this.handleSubmit}>
<FormItem>
{getFieldDecorator('event', {
rules: [{ required: true, message: '请输入事件!' }],
initialValue: record.event
})(
<Input />
)}
</FormItem>
<FormItem>
{getFieldDecorator('person', {
initialValue: toContentState(record.person),
rules: [{ required: true, message: '请输入相关人员!' }],
})(
<Mention
style={{ width: '100%' }}
suggestions={ suggestions }
/>
)}
</FormItem>
</Form>
</Modal>
);
}
}const WrappedEditForm = Form.create()(EditForm);class EventTable extends React.Component {
state = {
visible: false,
record: null,
index: 0
}
columns = [
{
title: '操作',
key: 'action',
render: (text, record, index) =>
<div>
<Button onClick={()=>{ this.setState({
visible: true,
record,
index
}) }}>编辑</Button>
</div>,
width: 200
},
{
title: '事件',
dataIndex: 'event',
key: 'event',
render: (text, record, index) =>
<div>
<span>{text}</span>
</div>,
width: 200
},
{
title: '相关人员',
dataIndex: 'person',
key: 'person',
width: 200
}
];
data = [
{
key: '1',
event: '早餐',
person: '@组长',
}, {
key: '2',
event: '午餐',
person: '@组长',
}, {
key: '3',
event: '晚餐',
person: '@组长',
}
];
onCancel = () => {
this.setState({visible: false})
}
onSave = (values) => {
this.setState({visible: false})
this.data[this.state.index].event = values.event
this.data[this.state.index].person = values.person
}
render() {
return (
<div>
<Table columns={this.columns} dataSource={this.data} style={{ width: 600 }}/>
<WrappedEditForm visible={this.state.visible} record={this.state.record}
onCancel={this.onCancel} onSave={this.onSave} />
</div>
)
}
}export default EventTable