如何实现MUI Select组件取消选中？自动取消或添加取消项方法

问题1：是否存在专属props支持点击已选中对象后自动取消选中状态？ #

Material UI 的 Select 组件没有内置专属props实现该功能，需要自定义 onChange 逻辑：

• 在事件回调中判断新选中值是否与当前状态值一致，若一致则将状态重置为 null（或空值），否则正常更新状态。

修改后的 onChange 代码：

onChange={(e) => {
  setFilterUser(e.target.value === filterUser ? null : e.target.value);
}}

问题2：如何添加额外的MenuItem来取消已选中的项目？ #

直接在 Select 内部新增一个 MenuItem，将其 value 设置为 null（需与状态初始值匹配），文本可设为“取消选择”：

完整修改后的代码：

<FormControl>
  <InputLabel>{t('typeUsers')}</InputLabel>
  <Select
    label={t('typeUsers')}
    value={filterUser}
    onChange={(e) => {
      setFilterUser(e.target.value === filterUser ? null : e.target.value);
    }}
  >
    {/* 新增取消选择项 */}
    <MenuItem value={null}>取消选择</MenuItem>
    {/* 原用户列表项 */}
    {Object.values(users)
      .filter((user) => user.administrator === false)
      .map((user) => (
        <MenuItem key={user.id} value={user.id}>
          {user.name}
        </MenuItem>
      ))}
  </Select>
</FormControl>

注意事项 #

• 确保 filterUser 的初始值为 null（或空字符串），保证未选中状态与取消项的value匹配。
• 若业务允许空值作为有效状态，该方案可直接使用。

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