Reactstrap оповещение автоматически скрыто
Я новичок в React и использую Alert - Dismissing from Reactstrap, мне нужно, чтобы предупреждение автоматически исчезало через 2 секунды. Я пытался найти какую-то функцию, которую можно было бы сделать, но, к сожалению, не смог. Спасибо за помощь
Ответы 3
Пожалуйста, взгляните на этот код, скрытие предупреждения через определенное время
если вы хотите показать предупреждение о каком-либо действии, вы можете включить состояние, связанное с этим предупреждением, и отключить его, когда вы хотите его скрыть.
Мне нравится играть с предупреждениями: вот полный динамический пример, в котором я устанавливаю одно предупреждение и контролирую его в соответствии с моими требованиями.
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: true мы показываем оповещение, с помощью alertcolor: мы устанавливаем цвет в соответствии с реакцией или начальной загрузкой сообщение: здесь мы помещаем содержимое того, что хотим отобразить
в конце вы замечаете, что window.setTimeout (() => установлено на тайм-аут в 8000 (8 секунд)
не забудьте добавить свои состояния в конструктор.
Надеюсь, это поможет: D
У меня была похожая проблема. Моей целью было показать предупреждающее сообщение после закрытия модального окна. Я использую response-bootstrap для компонента Modal и Alert с useState и использую обработчики эффектов.
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>