根据ant官方文档可以得知，可以在select组件中直接不写mode,这样的话select默认是单选的

有没有办法实现清空select输入框呢？其实antd官网已经给了我们一个可以清空select输入框的方法，我们只需要在select组件中添加一个allowClear即可实现在输入框中有数据的时候，鼠标移入输入框显示出一个清除按钮，点击按钮即可清除成功。如下图所示：

但是，我现在有个需求是控制select为单选的同时，我还需要控制，点击上面标签让下面的select清空，如下图所示：

实现方式：

通过在select外面包一层Form，然后通过ref指定form，并使用方法this.formRef.curren.resetFields()，重置表单，并更改控制上面标签显示的变量值即可(当然为什么要使用ref来实现呢，具体antd上面已经给说明了，class组件只能用ref，而函数组件则使用useForm)，antd上class组件和函数组件使用说明及代码如下，

import React, {
    
     Component } from "react";
import {
    
     connect } from "dva";
import {
    
    
  Form,
  Select,
  Modal,
  Card,
} from "antd";
import styles from "./newindex2.less";
const FormItem = Form.Item;
const Option = Select.Option;
const {
    
     Meta } = Card;
const [form] = Form.useForm();
const cols = {
    
    
  labelCol: {
    
     span: 6 },
  wrapperCol: {
    
     span: 18 }
};
@connect(({
     
      newsecondExamine, loading }) => ({
    
    
  newsecondExamine,
  loading: loading.models.newsecondExamine
}))
export default class NewSecondExamine extends Component {
    
    
  constructor(props) {
    
    
    super(props);
    this.state = {
    
    
      showBtn: ""
    };
  }
  formRef = React.createRef();

  render() {
    
    
    const {
    
    
      newsecondExamine: {
    
    
        transList,
        examVisible,
      }
    } = this.props;
    const children = [];
    const btns = [];

    const onChange = value => {
    
    
      this.setState({
    
     showBtn: value });
    };
    const clear = () => {
    
    
      this.formRef.current.resetFields();
      this.setState({
    
     showBtn: "" });
    };
    transList.map(item => {
    
    
      children.push(
        <Option key={
    
    item.id} value={
    
    item.id} className={
    
    styles.icon1}>
          {
    
    item.name}
        </Option>
      );
    });
    transList.map((item, index) => {
    
    
      if (this.state.showBtn == item.id) {
    
    
        btns.push(
          <div key={
    
    index} className={
    
    styles.btn}>
            <span className={
    
    styles.name}>{
    
    item.name}</span>
            <span className={
    
    styles.x} onClick={
    
    clear}></span>
          </div>
        );
      }
    });
    return (
      <div className={
    
    styles.pageDiv}>
        <Modal
          title="选择任务分配对象"
          destroyOnClose
          visible={
    
    examVisible}
          onOk={
    
    handleAssignOk}
          onCancel={
    
    this.handleCancel}
          maskClosable
          className={
    
    styles.selectOne}
        >
          <div className={
    
    styles.top}>
            <div className={
    
    styles.title}>已选择任务分配对象</div>
            <div className={
    
    styles.btns}>{
    
    btns}</div>
          </div>
          <Form ref={
    
    this.formRef}>
            <FormItem name="selectOne" label="仅支持单选">
              <Select
                showSearch
                allowClear
                defaultOpen={
    
    true}
                style={
    
    {
    
     width: 450 }}
                placeholder="请输入关键字搜索"
                onChange={
    
    onChange}
                optionFilterProp="children"
                filterOption={
    
    (input, option) =>
                  option.children.toLowerCase().indexOf(input.toLowerCase()) >=
                  0
                }
              >
                {
    
    children}
              </Select>
            </FormItem>
          </Form>
        </Modal>
      </div>
    );
  }
}