Показать заполнитель вместо выбранного значения

Я использую компонент Ant Design <Select>. Что происходит, так это то, что когда компонент загружается в первый раз, он показывает заполнитель, но когда я выбираю какое-то значение, а затем снова пытаюсь его изменить, то в месте заполнителя отображается выбранное значение. Это правильно в соответствии с поведением по умолчанию. Но я хотел бы показывать заполнитель каждый раз, когда нажимается поле выбора.

Ознакомьтесь с рабочей демонстрацией.


reactjs antd
person Triyugi Narayan Mani    schedule 18.09.2019    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Как вы сказали, по умолчанию в дизайне муравьев отображается выбранное значение в качестве заполнителя, и нет такой возможности изменить это поведение.

Однако вы можете добиться этого, внеся такие изменения в 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

person Hemanthvrm    schedule 18.09.2019
comment
Спасибо. Это работает. Единственная проблема заключается в том, что когда у меня много полей, мне приходится писать по одному классу для каждого поля. - person Triyugi Narayan Mani; 19.09.2019

arrow_upward
1
arrow_downward

Отображение заполнителя в выбранном вводе в качестве опции не соответствует Ant Design стилю. Что вы действительно хотите, так это иметь возможность отменить выбор (очистить) после выбора.

В компоненте select Ant Design это делается с помощью clear button, который будет показан, если вы передадите параметр allowClear.

<Select
  allowClear
  // ...
</Select>

После очистки местозаполнитель снова отображается.

person chumakoff    schedule 18.09.2019
comment
Спасибо за Ваш ответ. Да, нажав «Очистить», я могу это сделать, но я ищу автоматический процесс. Например, когда я нажимаю «Выбрать», автоматически очищается. - person Triyugi Narayan Mani; 18.09.2019
comment
Вы говорите об этом? stackoverflow.com/questions/47415280 / - person chumakoff; 18.09.2019
comment
НЕТ. Я не хочу удалять выбранные значения. Я просто хочу показывать заполнитель каждый раз, когда нажимается поле выбора. - person Triyugi Narayan Mani; 18.09.2019
comment
Зачем тебе это надо? - person chumakoff; 18.09.2019
comment
Скажите клиенту, что это не так, как это делается в Ant Design ) - person chumakoff; 18.09.2019

arrow_upward
0
arrow_downward

Используйте пустой массив для реквизита value:

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

У меня была аналогичная проблема, это сработало для меня.

person Andrew Eyesman    schedule 23.02.2021