设置antDesign的select组件只选中一个

根据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>
    );
  }
}