ant-design Select组件，如何当value为空时显示placeholder？

Question

 <Select
 labelInValue
 value={{key:this.state.boxTypeId,label:this.state.boxType}}
getPopupContainer={() => document.getElementById('boxType')}
placeholder="请选择类型" style={{width: '100%'}}
onChange={e=>this.handleSelectChange('boxType',e)}>
 {
   boxModelState.map((item, index) => <Option value={item.id} key={index}>{item.name}</Option>)
}
</Select>

有个重置按钮，点了后，设置了state中boxTypeId，boxType 都为空，怎么placeholder不显示了，要怎么处理？

Answer 1

你的value为空的花，在antd中有些组件默认显示就是给你的空，空在组件里面代表有值，如果你想要显示placeholder的文件的花，把没有值做个判断显示成undefined 就可以正常显示了

Answer 2

搜 and-design-vue 搜到这里，如果是 andv 出现类似的问题，原因是当 value 为 undefined 时，placeholder 才生效。

如果你是 class + ts 写法，默认值又不能是 undefined，可以用以下的写法：
以 非 labelInValue 示例：

1. value 绑定的 data （例如上面的 boxTypeId）初始值赋值为 ''
2. :value="boxTypeId === '' ? undefined : boxTypeId"

Answer 3

obj=｛key：123，label：123｝
value =｛obj｝
obj=null

Answer 4

<Select value={this.state.value || ''} />