reactstrap 警报自动隐藏

reactstrap alert automatic hidden

我是 React 的新手,我使用 Alert - Dismissing from Reactstrap ,我需要警报在 2 秒后自动消失。我试图找到一些可以完成的功能,但不幸的是我没有。谢谢你的帮助

请看一下这段代码, hiding alert after a specific time

当您想要针对某些操作显示警报时,您可以启用与该警报关联的状态并在您想要隐藏它时禁用它。

警报是我喜欢玩的东西:这是一个完整的动态示例,我设置了 1 个警报并根据我的要求控制它。

1st 我们需要设置警报。如果你正在使用 reactstrap,请使用大写字母 A 作为警报

<Alert color={this.state.alertColor} isOpen={this.state.Alertvisible} toggle={(e) => this.setState({Alertvisible: false})}> {this.state.message} </Alert>

如您所见,我可以动态控制警报的颜色、可见性和内容,而无需设置多个警报。

这里是我控制警报的部分

this.setState({
            
Alertvisible: true, 
alertColor: 'success', 
message: 'Alerts are awesome!'}, 

()=> {window.setTimeout(()=>{this.setState({Alertvisible:false})},8000)
});

所以让我解释一下这是怎么回事! with alertvisible: true 我们显示警报, with alertcolor: 我们根据 reactstrap 或 bootstrap 设置颜色 message: 这里放我们要显示的内容

最后你注意到 window.setTimeout(()=> 这设置为 8000(8 秒)超时

不要忘记在构造函数中添加状态。

希望对您有所帮助 :D

我遇到了类似的问题。我的目的是在模式关闭后显示一条警报消息。我将 react-bootstrap 用于带有 useState 的 Modal 和 Alert 组件,并使用 Effects 挂钩。

const [visibleAlert, setVisibleAlert] = useState(false); --> init state

const handleVisible = () => { ---> Last State for Alert
    setAlertVisible(true)
    setTimeout(() => { ---> 2 seconds later which is closing
        setAlertVisible(false)
    }, 2000);
} 

useEffect(() => {

    handleClose();  ----> This is for Modal
    return () => {
    handleVisible();  ---> This is for Alert message
};

这是我的警报组件。

<Alert show={visibleAlert} variant="success"} dismissible>
    Employee List Updated Successfully.
</Alert>