Question

我以类似于Popup的方式使用Material-ui的Dialogue组件。但我希望它在屏幕上停留一会儿。我该如何设置？我正在寻找自动隐藏等功能。

Answer 1

这是基本的MUI对话框组件：

mounted(){
 console.dir(this.$refs.head);
 console.log(this.$refs.head.offsetHeight);
}

this.state.open决定对话框是否打开。要打开对话框，您可能已经将open设置为true。在同一setState函数中，您可以添加超时以隐藏对话框。

示例：

<Dialog 
    open={this.state.open ? true : false} 
    onClose={this.handleClose}  
    aria-labelledby="alert-dialog-title" 
    aria-describedby="alert-dialog-description" 
    disableBackdropClick 
> 
    //content...
</Dialog>

Answer 2

隐藏不是破坏。

const Login: FunctionComponent<Props> = (props) => {
const [should_open, set_should_open] = useState(true);
const { is_login } = useRecoilValue(user_info_state);

// ! logout function
const reset_user_info = useResetRecoilState(user_info_state);

return (
    <Wrapper {...props}>
        <StyledButton onClick={() => (is_login ? reset_user_info() : set_should_open(true))}>
            {is_login ? (
                <>
                    LogOut
                    <img src={airplanemode_inactive} alt='login' />
                </>
            ) : (
                <>
                    Login
                    <img src={airplanemode_active} alt='log_out' />
                </>
            )}
        </StyledButton>
        {is_login ? '' : <LoginModal should_open={should_open} set_should_open={set_should_open} />}
    </Wrapper>
);

};

你可以销毁模态组合取决于状态

如何自动销毁对话框组件？喜欢（autoHideDuration）

2 个答案: