如何在Material UI Autocomplete中选中选项后禁用该选项

要实现选中选项后将其禁用，核心是通过renderOption自定义选项渲染逻辑，结合状态管理判断选项是否已被选中，具体实现步骤如下：

实现步骤 #

• 管理选中状态：使用useState钩子跟踪当前选中的值
• 绑定状态到组件：通过Autocomplete的value和onChange属性同步选中状态
• 自定义选项渲染：在renderOption中判断当前选项是否为已选中值，添加禁用属性并设置对应样式

完整代码示例 #

import { useState } from "react";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { TextField, Typography } from "@material-ui/core";

function App() {
  const [selectedValue, setSelectedValue] = useState(null);

  return (
    <Autocomplete
      freeSolo
      id="free-solo-demo"
      options={["a", "b", "c"]}
      value={selectedValue}
      onChange={(event, newValue) => {
        setSelectedValue(newValue);
      }}
      renderOption={(option) => (
        <Typography 
          component="div" 
          style={{ 
            opacity: option === selectedValue ? 0.5 : 1,
            pointerEvents: option === selectedValue ? 'none' : 'auto'
          }}
        >
          {option}
        </Typography>
      )}
      renderInput={(params) => (
        <TextField
          {...params}
          label="freeSolo"
          margin="normal"
          variant="outlined"
          fullWidth
        />
      )}
    />
  );
}

export default App;

关键代码说明 #

• 状态管理：selectedValue存储当前选中的选项，setSelectedValue负责更新选中状态
• renderOption：通过option === selectedValue判断是否为已选中选项，设置opacity为0.5实现视觉上的禁用效果，同时用pointerEvents: 'none'阻止该选项的点击交互
• value与onChange：将组件选中值与状态变量绑定，确保状态和组件UI同步

如果需要支持多选场景，只需将selectedValue改为数组类型，判断条件改为selectedValue.includes(option)即可，核心逻辑保持一致。

内容的提问来源于stack exchange，提问作者Darkpsinight_2