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

Question

我正在用Material UI React创建一个表单。此表单将记录一组练习到我的数据库。对于其中一个输入，用户从Material UI Menu Item组件列表中选择他们想要记录的练习的名称。我还想给用户一个选项来添加一个练习到列表中，如果它不包括(新的运动，他们没有做过)。我添加了禁用属性，并尝试使用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

For accessibility， disabled元素会禁用这些事件。尝试设置与禁用项相似的样式。