最近开始使用antd组件库来开发react项目，用到select组件的时候发现和vue的有很多东西都不太一样，有个需求需要加上placeholder，一开始显示的时候是比较正常的，当后面需求需要用到value的时候，发现value一旦有值了placeholder就没有正常显示，即使是为空值的时候也不会正常显示，所以写一篇文章做个记录
需求
有值的时候，也就是组件中的 value 属性没有被设置为非空的值，显示的就是value的值
const App: React.FC = () => (
<Select
showSearch
placeholder="Select a person"
optionFilterProp="children"
value={'jack'}
onChange={onChange}
onSearch={onSearch}
filterOption={filterOption}
options={[
{
value: 'jack',
label: 'Jack',
},
{
value: 'lucy',
label: 'Lucy',
},
{
value: 'tom',
label: 'Tom',
},
]}
/>
);
export default App;
没有值的时候，placeholder的值会正常显示
const App: React.FC = () => (
<Select
showSearch
placeholder="Select a person"
optionFilterProp="children"
onChange={onChange}
onSearch={onSearch}
filterOption={filterOption}
options={[
{
value: 'jack',
label: 'Jack',
},
{
value: 'lucy',
label: 'Lucy',
},
{
value: 'tom',
label: 'Tom',
},
]}
/>
);
export default App;
问题
但是会出现以下的情况，设置value为动态值，当value为空的时候，按道理是要显示placeholder的，但是没有显示，每个下拉框都是空值,当且仅仅当value={''}，会出现这种问题
const App: React.FC = () => (
<Select
showSearch
placeholder="Select a person"
optionFilterProp="children"
value={''}
onChange={onChange}
onSearch={onSearch}
filterOption={filterOption}
options={[
{
value: 'jack',
label: 'Jack',
},
{
value: 'lucy',
label: 'Lucy',
},
{
value: 'tom',
label: 'Tom',
},
]}
/>
);
这种情况下没有value，也没有正常显示placeholder，不符合目标需求。
查找原因
在 Ant Design（antd）的 Select 组件中，placeholder 属性默认情况下是只有在没有设置任何 value 的情况下才会显示的。如果 value 不为空，那么 placeholder 不会显示。
当传入的value是null或undefined的时候，会视为value是没有值的，这情况下placeholder会正常显示处理，当如果val是""空字符串，则是为value是有值的
<Select
showSearch
placeholder="Select a person"
optionFilterProp="children"
value={val}
总结
对于select的value值想要置为空值，也就是初始化的情况下，可以对value设置为null或者是undefined，如果是置为空字符串的情况下，会被组件识别为有值，就会出现select下拉框全空白的情况
