如何为MUI Autocomplete free solo选择框实现已保存条目删除功能

实现方案 #

可以直接使用Autocomplete组件内置的renderOption属性自定义下拉选项的渲染内容，在每个选项右侧插入删除按钮，点击后触发你自定义的删除逻辑即可，无需额外引入第三方组件。

步骤1：导入所需依赖（未导入时需要补充）

import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';
import Box from '@material-ui/core/Box';

步骤2：修改Autocomplete组件代码

新增renderOption属性实现带删除按钮的自定义选项，修改后完整代码如下：

<Autocomplete
  freeSolo
  className={classes.field}
  value={reference}
  onChange={(event, newValue) => {
    setValue(newValue)
    setReference(newValue)
  }}
  onInputChange={(event, newInputValue) => {
    setValue(newInputValue)
  }}
  options={searchHistoryReference} // 存储在localStorage的历史数组
  // 新增自定义渲染选项逻辑
  renderOption={(option) => (
    <Box width="100%" display="flex" alignItems="center" justifyContent="space-between">
      <span>{option}</span>
      <IconButton
        size="small"
        edge="end"
        onClick={(e) => {
          // 阻止事件冒泡，避免点击删除时触发选项选中逻辑
          e.stopPropagation();
          // 调用你自己实现的删除逻辑，入参是当前要删除的条目值
          handleDeleteHistoryItem(option);
        }}
      >
        <CloseIcon fontSize="small" />
      </IconButton>
    </Box>
  )}
  renderInput={(params) => (
    <TextField
      {...params}
      className={classes.field}
      onChange={(e) => setReference(e.target.value)}
      label='Number'
      variant='outlined'
      fullWidth
    />
  )}
/>

可选：实现Delete按键删除效果

如果需要实现悬浮选中条目后按Delete键删除的交互，可以给Autocomplete添加onKeyDown属性：

<Autocomplete
  // 其他原有属性保持不变
  onKeyDown={(e) => {
    if (e.key === 'Delete') {
      // 获取当前高亮的选项索引
      const highlightedIndex = e.currentTarget.getAttribute('data-highlighted-index');
      if (highlightedIndex !== null) {
        e.preventDefault();
        handleDeleteHistoryItem(searchHistoryReference[highlightedIndex]);
      }
    }
  }}
/>

你只需要自行实现handleDeleteHistoryItem函数，逻辑为把传入的条目从searchHistoryReference数组中移除，再更新回localStorage即可，组件会自动重新渲染下拉列表。

内容的提问来源于stack exchange，提问作者Ben in CA