是否可以在悬停时禁用 Material ui 元素（选择）？答案

【问题标题】：Is it possible to make a Material ui element(Select) disable on hover?是否可以在悬停时禁用 Material ui 元素（选择）？
【发布时间】：2020-02-04 15:19:39
【问题描述】：

当用户将鼠标悬停在一个元素上时，我想做这样的事情：

document.getElementById("dropdownCategory").disabled = true;

        <Tooltip arrow placement="right" title={props.description} >
            <FormControl id="dropdownCategory" >
                <InputLabel id="demo-simple-select-label" >{props.title} - {props.price}€</InputLabel>
                <Select
                    labelId="demo-simple-select-label"
                    id="demo-simple-select"
                    value={category[props.id]}
                    onChange={handleCategory}
                    name={props.id}
                >
                    {numbers.map(l => (
                        <MenuItem value={l} key={l}>{l}</MenuItem>
                    ))}
                </Select>
            </FormControl>
        </Tooltip>

这是我的组件，当用户将鼠标悬停在它上面时，我想禁用它

【问题讨论】：

你能分享一些代码吗？我们无法仅用一行代码理解场景:)
对您希望在悬停时禁用的为什么进行一些描述会很有帮助。对用户来说，这似乎是一件可怕的事情。我希望还有其他一些更重要的条件在起作用——否则为什么会有一个不允许用户与之交互的Select？
实际上我想以其他方式进行，默认情况下选择是禁用的，当用户将鼠标悬停在它上面时它将处于活动状态。将有几个选择项，但其中只有一个可以处于活动状态，即悬停的那个！

标签： css reactjs material-ui

【解决方案1】：

如果你想根据鼠标是否在它上面来改变Select的启用状态，你可以根据鼠标进入和离开组件的时间来切换disabled属性。

首先，您需要设置一个属性来跟踪鼠标是否在Select 上。如果您使用的是功能组件，则可以使用 useState 挂钩：

const [isOver, setIsOver] = useState(false);

然后，你需要修改Select如下：

<Select
    ...otherProps
    disabled={!isOver}
    onMouseEnter={onEnter}
    onMouseLeave={onLeave}
  >

最后，你需要处理鼠标的入口和出口：

const onEnter = (e) => { setIsOver(true); }
const onLeave = (e) => { setIsOver(false); }

您可能需要做一些魔术来处理鼠标在MenuItems 上而不是在Select 上，但这将为您提供如何切换它的框架。

【讨论】：

感谢 Brian 的完整解释。它解决了我的问题。