python做网站例子,免费的网页制作软件,网站公司 转型,优普道建筑网校右上角x按钮聚焦效果展示 第一次点击不会聚焦#xff0c;第二次或多次点击会出现这种情况。如果多个地方公用一个页面里#xff0c;这个页面包含这个组件#xff0c;那其它页面刚打开弹框就是聚焦状态#xff0c;是个样式的问题。 解决#xff1a;
import * as React fr…右上角x按钮聚焦效果展示 第一次点击不会聚焦第二次或多次点击会出现这种情况。如果多个地方公用一个页面里这个页面包含这个组件那其它页面刚打开弹框就是聚焦状态是个样式的问题。 解决
import * as React from react;
import { Button } from fluentui/react-components;
import { Dialog, DialogSurface, DialogContent, DialogTrigger } from fluentui/react-dialog;
import { Dismiss24Regular } from fluentui/react-icons;const DialogExample () {const [open, setOpen] React.useState(false);const buttonRef React.useRefHTMLButtonElement(null);React.useEffect(() {if (!open buttonRef.current) {buttonRef.current.blur();}}, [open]);return (
div
Dialog open{open} onOpenChange{(event, data) setOpen(data.open)}
DialogTrigger
ButtonOpen Dialog/Button
/DialogTrigger
DialogSurface
DialogBodyDialogTitleaction{DialogTrigger actioncloseButtonref{buttonRef}appearancesubtlearia-labelcloseicon{Dismiss24Regular /}//DialogTrigger}Dialog title/DialogTitleDialogContentinput placeholderInput something //DialogContent/DialogBody
/DialogSurface
/Dialog
/div);
};export default DialogExample;失焦就好了给close button设置style样式是无效的
