gpt4 book ai didi

reactjs - 在Material-UI中以编程方式打开工具提示

转载 作者:行者123 更新时间:2023-12-03 16:12:36 25 4
gpt4 key购买 nike

我需要能够向元素添加工具提示,以便其功能像普通的一样(当元素悬停时会打开),同时我需要能够以编程方式将其打开。

我知道它允许使用open属性,但是在这种情况下,我将组件从不受控制的状态切换到受控制的状态,这是不可能的。

我也无法在工具提示中的按钮上总结:hover事件,因为这在浏览器中是不可能的。

有没有办法通过裁判来做到这一点?当我在工具提示中使用ref时,它只会传递给子元素。

谢谢!

最佳答案

当控制Tooltip时,在不受控制的情况下打开或关闭工具提示时,onOpenonClose函数仍然会触发。您可以使用这些功能来更改Tooltip的受控状态。

工作示例:

import React from "react";
import ReactDOM from "react-dom";

import Tooltip from "@material-ui/core/Tooltip";
import Button from "@material-ui/core/Button";

function App() {
const [tooltipIsOpen, setTooltipIsOpen] = React.useState(false);
return (
<div className="App">
<Tooltip
open={tooltipIsOpen}
onOpen={() => setTooltipIsOpen(true)}
onClose={() => setTooltipIsOpen(false)}
title="I'm a controlled tooltip"
>
<span>Hover over me or click the button</span>
</Tooltip>
<div style={{ marginTop: 50 }}>
<Button
onClick={() => setTooltipIsOpen(!tooltipIsOpen)}
variant="contained"
color="primary"
>
Click me to {tooltipIsOpen ? "close" : "open"} the tooltip
</Button>
</div>
</div>
);
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Edit controlled Tooltip

关于reactjs - 在Material-UI中以编程方式打开工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58346266/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com