antd中select组件使用value=‘‘后，提示文本不显示

问题描述

使用antd的select组件，并给组件设置对应的value属性为“”，但是发现之前的提示文本也不存在了。

class Loan extends Component {
    constructor(props){
        super(props);
        this.state={
          value1 : '',
          }
     }
}

<Select style={{width:200}} placeholder="请输入内容" value={this.state.value2} onChange={this.handleClockTwo}>
   <Option value="Zhejiang">Zhejiang</Option>
   <Option value="Jiangsu">Jiangsu</Option>
</Select>

一、原因分析

在antd中的select的value的值为 ‘’ 或者 null 都会被判定为存在合法value的值。因此使用有value值所以就不会出现提示文本。

二、解决方法

使用undefined替代 ‘’ 或者 null 即可。

class Loan extends Component {
    constructor(props){
        super(props);
        this.state={
          value1 : undefined
          }
     }
}

<Select style={{width:200}} placeholder="请输入内容" value={this.state.value2} onChange={this.handleClockTwo}>
   <Option value="Zhejiang">Zhejiang</Option>
   <Option value="Jiangsu">Jiangsu</Option>
</Select>