filterSelectedOptions в автозаполнении Material UI Lab не работает с onChnage - PullRequest
Новая
       57

filterSelectedOptions в автозаполнении Material UI Lab не работает с onChnage

0 голосов
/ 06 августа 2020

Когда я использую автозаполнение для получения выбранных дат, выбранные параметры не фильтруются. Следовательно, я могу выбрать несколько экземпляров одних и тех же данных. Хотя, когда я удаляю опору OnChange, она дает результат, но теперь я не могу обновить состояние. 

<Autocomplete
  multiple
  name="ClassSchedule"
  onChange={(event, value) => setDays(value)}
  ChipProps={{
    style: {
      backgroundColor: "#2EC5B6",
      borderRadius: "5px",
      color: "#fff",
      fontFamily: "Source Sans Pro",
    },
  }}
  id="tags-standard"
  options={[
    { title: "sunday" },
    { title: "monday" },
    { title: "tuesday" },
    { title: "wednesday" },
    { title: "thursday" },
    { title: "friday" },
    { title: "saturday" },
  ]}
  getOptionLabel={(option) => option.title}
  renderInput={(params) => (
    <CssTextField
      {...params}
      style={{
        borderRadius: "10px",
        backgroundColor: "#F5FCFB",
        fontFamily: "Source Sans Pro",
      }}
      variant="outlined"
      id="custom-css-outlined-input"
    />
  )}
/>

Ответы [ 3 ]

2 голосов
/ 06 августа 2020

Ваша onChange функция нуждается в улучшении. Вы должны установить массив значений, как указано в массиве параметров. Оба массива должны совпадать. Вы получали подробности от options--> Titles. тогда Вы должны установить его, создав аналогичный массив на onChange. как set options--> Titles

Попробуйте мой рабочий пример Sandbox здесь

2 голосов
/ 06 августа 2020

Согласно Autocomplete do c:

value - any - Значение автозаполнения. Значение должно иметь ссылочное равенство с параметром, чтобы его можно было выбрать . Вы можете настроить поведение равенства с помощью getOptionSelected prop .

getOptionSelected - func - Используется, чтобы определить, выбран ли параметр , учитывая текущее значение . По умолчанию используется строгое равенство.

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

<Autocomplete
  ...
  getOptionSelected={(option, value) => option.title === value.title}
  ...
/>

Ниже разветвленные коды и ящик

Править странный-перлман-6дрзм

1 голос
/ 06 августа 2020

Чтобы дать вам больше информации о том, что происходит: основная причина, по которой размещение вашего onChange обработчика заставляет options снова заполняться всеми днями, заключается в том, что ваш компонент перерисовывается каждый раз, когда вы установите состояние для дней по сравнению с тем, когда вы не устанавливали состояние в течение нескольких дней. Я обнаружил, что проверка автозаполнения Material UI по умолчанию работает с массивом, хранящимся в состоянии, по сравнению с жестко запрограммированным options у вас есть 

options={availableDays} //state based

CodeSandBox: https://codesandbox.io/s/so-react-material-ui-autocomplete-h2unq?file= / src / App. js

...