Question

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

Answer 1

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

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

Answer 2

我喜欢玩警报：这是一个完整的动态示例，其中我设置了1条警报并根据自己的需求进行控制。

首先，我们需要设置警报。如果您使用的是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)
});

所以让我解释一下这里发生了什么！使用alertvisible：是的，我们显示警报，使用alertcolor：我们根据reactstrap或bootstrap设置颜色讯息：在这里，我们将要显示的内容放在其中

最后，您会注意到window.setTimeout（（）=>设置为8000（8秒）内的超时时间

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

我希望这对您有帮助：D

Answer 3

我有类似的问题。我的目的是在模式关闭后显示警报消息。我正在使用useState和use Effects挂钩对Modal和Alert组件使用react-bootstrap。

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>

reactstrap警报自动隐藏

3 个答案: