Mui 自動完成就像 mui select

Question

您好我正在嘗試創建一個組件，其行為類似於 mui select 和 mui aoutcomplete。

我在存儲 select 上的值時遇到問題。

我想要類似 select 中示例的東西

<MenuItem value=414>JUST SOME TEXT I CAN SERACH IN</MenuItem>

Answer 1

您可以使用renderOption指定自定義選項呈現 function。此 function 應返回具有所需值的MenuItem組件。

<Autocomplete
  options={options}
  getOptionLabel={option => option.title}
  renderOption={option => (
    <MenuItem value={option.value}>{option.title}</MenuItem>
  )}
  renderInput={params => (
    <TextField {...params} label="Select" variant="outlined" />
  )}
/>