Ant-design Select component, how to display placeholder? when value is empty

 <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>

there is a reset button. After clicking it, the boxTypeId,boxType in state is set to be empty. How can the placeholder not be displayed? what should I do with it?

Mar.07,2021

your value is empty. In antd, some components are empty for you by default, and empty means there is a value in the component. If you want to display the flowers of placeholder files, make a judgment that no value is displayed as undefined and you can display


normally.

found here in and-design-vue . If there is a similar problem with andv, the reason is that placeholder takes effect only when value is undefined .

if you are class + ts , and the default value cannot be undefined , you can write it as follows:
as non- labelInValue example:

  1. value binding data (for example, boxTypeId above) initial value assignment is ''
  2. : value= "boxTypeId ='? undefined: boxTypeId"

obj= {key:123,label:123}
value = {obj}
obj=null


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