Question

我正在使用Ant Design <Select>组件。发生的情况是，第一次加载组件时，它显示占位符，但是当我选择某个值然后再次尝试更改时，则在占位符的位置显示所选值。按照默认行为，这是正确的。但是我想在每次单击选择框时显示占位符。

Answer 1

在选择输入中作为选项显示占位符不是Ant Design样式。您真正想要的是能够在选择后取消选择（清除）。

在Ant Design的{{1}}组件中，它是使用select完成的，如果您通过clear button选项，则会显示该信息。

allowClear

清除占位符后再次显示。

Answer 2

正如您所说，在蚂蚁设计中默认行为是将选定的值显示为占位符，并且没有更改此行为的选项。

但是，您可以通过更改CSS来实现它。

.ant-select.ant-select-open.ant-select-focused.ant-select-enabled
  .ant-select-selection.ant-select-selection--single
  .ant-select-selection__rendered
  .ant-select-selection-selected-value {
  visibility: hidden;
}

.ant-select.ant-select-open.ant-select-focused.ant-select-enabled
  .ant-select-selection.ant-select-selection--single
  .ant-select-selection__rendered
  .ant-select-selection-selected-value::before {
  visibility: visible;
  content: "Select a Person";
}

此处正在运行示例链接 https://codesandbox.io/s/stoic-hugle-49ify

Answer 3

为 value 属性使用一个空数组：

<Select
  value={[]}
  // ...
</Select>

我遇到了类似的问题，这对我有用。

显示占位符而不是所选值

3 个答案: