前言

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

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

一、解决方案

对于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的显示和清空