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

Posted 2020-12-31 gattuso-caesar

背景

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

开始

经过一番思考，有了一个初步的思路：使用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 })
        }}
      >{item}</Menu.Item>
    })
  }

  render () {
    const { isShowMenu } = this.state
    const menu = (
      <Menu>
        {this.getChosenMenu()}
      </Menu>
    )

    return (
      <Form>
        ...
        <FormItem>
          <Dropdown
            overlay={menu}
            visible={isShowMenu}
          >
            {
              getFieldDecorator(‘name‘, {
                rules: [{
                  required: true,
                  message: ‘errorMsg‘
                }]
              })(
                <Input
                  onFocus={() => {
                    this.setState({
                      isShowMenu: true
                    })
                  }}
                  onBlur={() => {
                    this.setState({
                      isShowMenu: false
                    })
                  }}
                />
              )
            }

          </Dropdown>
        </FormItem>
        ...
      </Form>
    )
  }
}

遇到的问题

点击输入框，下拉菜单有了，然后选择下拉菜单消失，但是输入框没有如预想的那样设置上选中的内容，这是为什么？

最后发现去选择下拉菜单的内容的时候，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 })
        }}
      >{item}</Menu.Item>
    })
  }

  render () {
    const { isShowMenu } = this.state
    const menu = (
      <Menu>
        {this.getChosenMenu()}
      </Menu>
    )

    return(
      <Form>
        ...
        <FormItem>
          <Dropdown
            overlay={menu}
            trigger={[‘click‘]}
          >
            {
              getFieldDecorator(‘name‘, {
                rules: [{
                  required: true,
                  message: ‘errorMsg‘
                }]
              })(
                <Input />
              )
            }
          </Dropdown>
        </FormItem>
        ...
      </Form>
    )
  }
}

1.遇到问题一定要想清楚再写代码，不然会给自己造成不必要的麻烦；

2.多看文档，多看文档.