前几周在项目上遇到一个可以让人接受却又让用户使用很不舒服的问题。
在创建信息的时候需要几个下拉列表选择内容,当我选择之后确定或取消,按照用户的操作应该是再次点击创建后打开的弹窗后,所有的select框应该是去掉上一次的操作,需要用户重新去选。
项目上的antd是3.12.2版本
查看官网:
通过官方文档来看通过value
就可以设置值,那说明也能将它清空(这里还是需要onChange
的配合)
通过项目的情况value
的内容不能为string
或number
,只能用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>
});
最后如有不妥之处,请多多指教,大佬们的意见和建议是小白我前行路上的垫脚石。