Блог

Главная - Вопросы по программированию - Пользовательский интерфейс материала 5.0 : При пустом значении автозаполнения выбираются все элементы

Пользовательский интерфейс материала 5.0 : При пустом значении автозаполнения выбираются все элементы

#reactjs #autocomplete #material-ui

Вопрос:

Текущее Поведение 😯

Когда ввод равен нулю, стиль выделяется серым светом (что-то вроде этого).

введите описание изображения здесь

Вот мой текущий код

 <Field
  name="day"
  render={({ input }) =>
      <Autocomplete
         options={this.days}
         getOptionLabel={(option) => {
              return option.toString() 
          }}
          {...input}
          onChange={(e, val) => {
              input.onChange(val);
          }}
          isOptionEqualToValue={(option, value) => {
              if (value === "" || value === option)
                  return true;
          }}
       renderInput={(params) => <TextField {...params} label="Day" variant="outlined" />}
      />
} />

Примечание : Я использую оболочку «Поле» для окончательной формы реакции (причина, по которой mui-rff еще не обновился до MUI 5.0)

Ожидаемое поведение 🤔

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

введите описание изображения здесь

Контекст 🔦

Chrome: 94.0.4606.71

Комментарии:

1. Вы должны проверить эту функцию isOptionEqualToValue , которая возвращает true все параметры, если value она пуста, чего не должно быть в случае пустого значения.

2. Если я не использую эту функцию и возвращаю значение true, когда оно равно «null», в chrome появится предупреждение о том, что пустая строка «»»» не соответствует ни одному варианту. Но в моем случае я хочу сохранить значение по умолчанию пустым.

3. Вы можете инициализировать значение как null или first option в автозаполнении, чтобы избавиться от предупреждения. Некоторое обсуждение репо MUI

4. Проблема в том, что у меня все еще есть проблема, и, более того, она отображается пустой из-за добавления пустой строки. Кстати, спасибо за вашу помощь.

5. Если ваше значение пусто, начальное автозаполнение будет пустым. Хотя, если вы решите выбрать какой-либо параметр, при отображении автозаполнения вы можете присвоить это значение value реквизиту. Например, в этой песочнице есть оба параметра: либо какое-то предварительно выбранное значение, либо null значение (которое прокомментировано).

Ответ №1:

Наконец я нашел решение.

Мне нужно было двигаться {...input} в качестве первой опоры, прежде options={this.days} чем добавлять эту опцию : value={null} .

Позаботьтесь о том, где вы декларируете {...input} .

Метки: