背景
遇到这样一个需求,在一个表单中实现一个带选择功能的输入框,既能输入又能选择。
开始
经过一番思考,有了一个初步的思路:使用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 })