无法在 MUI 自动完成中选择自定义选项？答案

【问题标题】：Custom options cannot be selected in MUI Autocomplete?无法在 MUI 自动完成中选择自定义选项？
【发布时间】：2021-10-19 23:52:45
【问题描述】：

我想将 MUI Autocomplete 与自定义 renderOption 属性一起使用。这样做我不能再选择一个选项。怎么了？

sandbox

<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" />}
/>

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

你需要传播MUIAutocomplete提供的道具。没有它，MUI 无法提供onClick 来了解选项何时更改或提供key 来识别选项，因此您的选项不起作用：

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

【讨论】：