antd select组件相关——传值是数字、显示是文字、下拉框设置了value导致placeholder不显示等问题（较基础）

antd select组件相关——传值是数字、显示是文字、下拉框设置了value导致placeholder不显示等问题（较基础）

首先看要求：

有placeholder, 显示四个选项，选择一个选项时，传给后端的是数字类型。

数据是下面的结构：

teamOptions = [
        {
            label: "0-10人",
            value: 1
        },
        {
            label: "10-50人",
            value: 2
        },
        {
            label: "50-100人",
            value: 3
        },
        {
            label: "100人以上",
            value: 4
        }
    ];

------------------------------------------------------ 开始处理 -------------------------------------------------------

state中使用两个值来共同处理：

state = {
        	scale: "",//表示要显示的文字
        	scale_key: 0,//表示要传值的数字
        };

结构：

<Select
       defaultValue=""
       value={this.state.scale}//显示在select框上的值
       placeholder="选择人数范围"
       onChange={this.handleScaleChange}>
       {this.teamOptions.map(item => {//渲染4个选项
             return (
               <Select.Option value={item.label} key={item.value}>
                {item.label}//option上显示的 是teamOptions每一项的label
               </Select.Option>
             );
      })}
</Select>

onChange事件：

 handleScaleChange = (label: any, value: any) => {
        console.log("label:",label,"value:",value)
        this.setState({ scale: label, scale_key: value.key });
    };

当选择一个选项，触发onChange事件，可以看到上面打印的结果是：

所以可以知道
label就是我们要显示在框上的，即 this.state.scale ——设置scale：label
value是一个对象，里面有个key是”3“，这个可以转成数字传给后端。即设置scale_key：value.key

如果数据结构不同，可以自己试着打印一下，看看自己需要展示的和传值的分别是哪个。

最后还有个问题，就是:由于下拉框设置了value，导致placeholder不显示的问题

解决方法是：

在一切操作之前，先设置value为undefined，不知道有没有什么后患，目前我是这么解决的，暂时没有什么问题，欢迎指正。

我这里在 componentDidMount函数 里设置的：

componentDidMount() {
        this.setState({ scale: undefined });//因为value是绑定了this.state.scale的
    }

以上，问题都已解决。