Блог

Я хочу использовать MUI Autocomplete с пользовательским renderOption свойством. Делая это, я больше не могу выбрать вариант. Что случилось?

песочница

 <Autocomplete
  disablePortal
  id="combo-box-demo"
  options={top100Films}
  sx={{ width: 300 }}
  renderOption={(props, option) => (
    <div style={{ padding: "4px 10px" }}>
      {option.label   " "   option.year}
    </div>
  )}
  renderInput={(params) => <TextField {...params} label="Movie" />}
/>
 

Вам нужно разложить реквизит, предоставленный MUI Autocomplete . Без этого MUI не может предоставить onClick информацию об изменении опции или key определить опцию, поэтому ваша опция не работает:

 renderOption={(props, option) => (
  <div {...props} style={{ padding: "4px 10px" }}>
    {option.label   " "   option.year}
  </div>
)}