时间戳

首页 > 解决方案 > 是否可以在悬停时禁用 Material ui 元素（选择）？

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

问题描述

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

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}€&lt;/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>

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

标签： cssreactjsmaterial-ui

解决方案

如果你想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，但这将为您提供如何切换它的框架。

推荐阅读