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: <span style={{color: '#bfbfbf'}}>请选择名称</span>
    };
    /**
     *选择名称
     * @param obj --> label名称
     *                key路径
     */
    handleChange = obj => {
        const _this = this;
        const { label, key } = obj;
        _this.setState({
            name: label
        });
    };

    /**
     * 创建确定
     */
    handleOk = () => {
        const  _this = this;
        _this.setState({
            name: <span style={{color: '#bfbfbf'}}>请选择名称</span>
        });
    };

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

    render () {
        const { name } = this.state;
        return (
                {/*存储池名称*/}
                <div className='boxBotm'>
                    <span>名称:</span>
                    <Select
                        labelInValue
                       {/*起初key我定义了一个变量,像name一样,每次点击创建上一次的操作都会被清掉,
                        但是有个问题就是select框会是个白框,光秃秃的,没有那个placeholder的提示,把key写成空字符串就好了*/}
                        value={{key: '', label: name}}
                        onChange={this.handleChange}>
                        {/* 这里的data是调取接口请求的数据*/}
                        {
                            data.map((item) => {
                                return <Option value={item.path} key={item.name}>{item.name}</Option>;
                            })
                        }
                    </Select>
                </div>
        );

    }
}


export default AddModal;

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

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

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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值