同时使用 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