如何在MaterialUI Select组件选中选项时添加清除选项图标？

要实现选中选项后显示清除图标，点击图标能清空选中值，你可以按以下方式修改代码：

• 依据hwStatus的值控制清除图标的显示：仅当hwStatus不为空时才渲染清除图标
• 给ClearIcon添加点击事件，点击时重置hwStatus并触发对应的表格过滤逻辑
• 给图标添加可点击的样式提示，提升交互体验

修改后的完整代码：

<Select
  InputProps={{
    startAdornment: hwStatus && ( // 仅选中值存在时显示图标
      <InputAdornment position='end'>
        <ClearIcon 
          sx={{ cursor: 'pointer', color: '#666' }} // 添加可点击样式
          onClick={() => {
            setHwStatus(''); // 清空选中值
            filterTable('SEARCH_BY_HW_STATUS', ''); // 同步触发空值过滤
          }}
        />
      </InputAdornment>
    ),
  }}
  value={hwStatus}
  onChange={(e) => {
    setHwStatus(e.target.value);
    filterTable('SEARCH_BY_HW_STATUS', e.target.value);
  }}
  displayEmpty
  inputProps={{ 'aria-label': 'Without label' }}
  sx={{ fontSize: '15px', height: '40px' }}>
  <MenuItem value='Pending'>Pending</MenuItem>
  <MenuItem value='Complete'>Completed</MenuItem>
</Select>

关键改动说明： #

1. 条件渲染图标：将startAdornment的内容改为hwStatus && (...)，确保只有选中了具体选项时，清除图标才会显示
2. 添加清空逻辑：给ClearIcon绑定onClick事件，点击时将hwStatus设为空字符串，同时调用filterTable传入空值，保证表格过滤状态同步更新
3. 优化交互体验：通过sx配置给图标添加cursor: 'pointer'，让用户直观感知到该图标可点击，也可根据需求调整图标颜色增强辨识度

这样修改后，选中任意选项时清除图标会自动出现，点击图标就能快速清空选中状态，同时同步更新表格的过滤结果。

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