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>
我是 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>