Umi + antd 实现select下拉框，点击重置按钮，清空select中的内容

前言

今天公司项目有一个需求，就是有多个下拉框，点击做左侧的重置按钮清空所有的下拉框的值

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、解决方案

对于antd中的select这个组件，当他的value属性是什么，他就会显示什么。因此我们应该对这个属性进行操作。

import styles from './index.css';
import { Select,Button } from 'antd';
import React from 'react';
const { Option } = Select;


 class MyComponent extends React.Component {
   constructor(props) {
     super(props)
    this.state={
      value:''
    }
   }
   componentDidMount() {
     
  }
  reset = () => {
    this.setState({
      value:''
    })
  }
  handleClick = (value) => {
    console.log(value)
    this.setState({
      value
    })
    console.log(this.state)
  }

   render(){
    return (
      <div className={styles.normal}>
        <Select placeholder='请输入内容' value={this.state.value} onChange={this.handleClick} style={{ width: 120 }} >
        <Option value="jack">Jack</Option>
        <Option value="lucy">Lucy</Option>
        <Option value="disabled" disabled>
          Disabled
        </Option>
        <Option value="Yiminghe">yiminghe</Option>
      </Select>

      <Button onClick={this.reset}></Button>
      </div>
    );
   }

}

export default MyComponent

上述代码就可以实现这个操作。
原理：
在state中设置一个动态的value，把这个value赋值给select中的value。就可以动态的操作select的显示和清空

---