不可选择的菜单项的事件处理程序

Question

我正在使用 Material UI React 创建一个表单。此表单会将一组练习记录到我的数据库中。对于其中一个输入，用户从 Material UI 菜单项组件列表中选择他们想要记录的练习的名称。我还想让用户选择在列表中添加一个练习（如果它不包括在内）（他们以前没有做过的新练习）。我添加了 disabled 属性并尝试像这样使用 onClick 事件侦听器：

<TextField
  id="exerciseName"
  label="Exercise Name"
  select
>
  <MenuItem disabled onClick={() => console.log("Add Exercise Clicked")}>
    Add Exercise
  </MenuItem>

  {exercises &&
    exercises.map((exercise) => (
      <MenuItem key={exercise.id} value={exercise.exerciseName}>
        {exercise.exerciseName}
      </MenuItem>
  ))}
</TextField>

在尝试了这个之后，我意识到事件处理程序不能在禁用的元素上触发。有没有一种方法可以实现添加练习菜单项的禁用状态，这样它就不能被选为输入的值，而是在触发时运行 onClick 处理程序？

Answer 1

为了便于访问，禁用的元素会禁用这些事件。尝试设置类似于您禁用项目的样式。