最近开始使用antd组件库来开发react项目，用到select组件的时候发现和vue的有很多东西都不太一样，有个需求需要加上placeholder，一开始显示的时候是比较正常的，当后面需求需要用到value的时候，发现value一旦有值了placeholder就没有正常显示，即使是为空值的时候也不会正常显示，所以写一篇文章做个记录

需求

有值的时候，也就是组件中的 value 属性没有被设置为非空的值，显示的就是value的值

js 复制代码

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的值会正常显示

js 复制代码

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={''}，会出现这种问题

js 复制代码

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是有值的

js 复制代码

<Select
    showSearch
    placeholder="Select a person"
    optionFilterProp="children"
    value={val}

总结

对于select的value值想要置为空值，也就是初始化的情况下，可以对value设置为null或者是undefined，如果是置为空字符串的情况下，会被组件识别为有值，就会出现select下拉框全空白的情况

如果觉得有趣或有收获，请关注我的更新，给个喜欢和分享。您的支持是我写作的最大动力！

记录Antd-placeholder不显示问题

需求

问题

查找原因

总结

如果觉得有趣或有收获，请关注我的更新，给个喜欢和分享。您的支持是我写作的最大动力！

往期好文推荐