React实现一个带选择功能的输入框

背景

遇到这样一个需求，在一个表单中实现一个带选择功能的输入框，既能输入又能选择。

开始

经过一番思考，有了一个初步的思路：使用Antd的下拉菜单和Input去做，页面加载的时候就去请求数据，然后在Input得到焦点的时候展开下拉菜单，失去焦点的时候收起菜单。

于是就写出了下面这样的代码:

import { Form, Input, Menu } from 'antd'
import PropTypes from 'prop-types'

const FormItem = Form.Item

class Test extends React.Component {
  static propTypes = {
    form: PropTypes.object.isRequired
  }

  state = {
    list: [],
    isShowMenu: false
  }
  componentWillMount () {
    //....这里请求数据列表,并将请求到的数据设设置给state
  }
  getChosenMenu = () => {
    const { list } = this.state
    return list.map(item => {
      return <Menu.Item
        key={item}
        onClick={() => {
          this.props.form.setFieldsValue({ 'name': item })