基于react+and Design实现下拉框，支持自由输入

基于react+and Design实现下拉框，支持自由输入

以下是基于select的改造方案，使用AutoComplete组件更简单方便一些，AutoComplete这组件的实现方式请移步: 基于react+and Design实现下拉框，支持自由输入，hooks篇.

_ antd组件库提供的select组件已经基本满足开发需求，本次介绍一下怎么实现自由输入
官方给的只能输入下拉列表里面包含的内容，这时要实现23px的字号，就需要自定义调整了。

  <Select
    showSearch
    onChange={(val) => {
      this.onUpdatedState('fontSize', val)
    }}
    className={styles.mixinControlSelect}
    value={lineHeight}
  >
    <Option value="20px">20px</Option>
    <Option value="24px">24px</Option>
    <Option value="28px">28px</Option>
    <Option value="32px">32px</Option>
  </Select>

怎么实现输入字号为23px呢，这时就需要select组件提供的两个方法支持，分别是onSearch跟onBlur。onSearch方法可以监听到输出框中的值变化，保存在state中。onBlur为失去焦点的时候调用方法，这时写入保存在state中的值。实现代码及效果如下：

constructor(props) {
    super(props)
    this.state = { 
	    fontSizeVal: ''
	}
  }

<Select
  showSearch
   onChange={(val) => {
     this.onUpdatedState('fontSize', val)
   }}
   onBlur={() => {
     this.state.fontSizeVal ? this.onUpdatedState('fontSize', this.state.fontSizeVal) : null
   }}
   onSearch={(val) => {
     this.setState({ fontSizeVal: `${parseInt(val)}px` })
   }}
   className={styles.mixinControlSelect}
   value={fontSize}
 >
    <Option value="20px">20px</Option>
    <Option value="24px">24px</Option>
    <Option value="28px">28px</Option>
    <Option value="32px">32px</Option>
 </Select>

this.onUpdatedState 这个方法是修改页面字体的方法，你可以定义成你点击完下拉框自己的事件

下拉时如下

如有问题请联系我~

欢迎加入QQ群: