antd默认清除select选中的内容

前几周在项目上遇到一个可以让人接受却又让用户使用很不舒服的问题。
在创建信息的时候需要几个下拉列表选择内容,当我选择之后确定或取消,按照用户的操作应该是再次点击创建后打开的弹窗后,所有的select框应该是去掉上一次的操作,需要用户重新去选。
项目上的antd是3.12.2版本
查看官网:


通过官方文档来看通过value就可以设置值,那说明也能将它清空(这里还是需要onChange的配合)
通过项目的情况value的内容不能为stringnumber,只能用LabeledValue

import React from 'react';
import { Select } from 'antd';

import './index.less';

const Option = Select.Option;

class AddModal extends React.Component {
    state = {
        // name
        name: 请选择名称
    };
    /**
     *选择名称
     * @param obj --> label名称
     *                key路径
     */
    handleChange = obj => {
        const _this = this;
        const { label, key } = obj;
        _this.setState({
            name: label
        });
    };

    /**
     * 创建确定
     */
    handleOk = () => {
        const  _this = this;
        _this.setState({
            name: 请选择名称
        });
    };

    /**
     * 创建弹窗关闭
     */
    handleCancel = () => {
        const  _this = this;
        _this.setState({
            name: 请选择名称
        });
    };

    render () {
        const { name } = this.state;
        return (
                {/*存储池名称*/}
                
名称:
); } } export default AddModal;

上面是我实现的代码,实现就是那几行主要代码:

value={{key: '', label: name}}
// 这个是每次关闭弹窗时将name变量设置内容充当placeholder,每次选择内容后这个提示就会被选择的内容替掉
this.setState({
     name: 请选择名称
});

最后如有不妥之处,请多多指教,大佬们的意见和建议是小白我前行路上的垫脚石。

你可能感兴趣的:(antd默认清除select选中的内容)