Reactstrap оповещение автоматически скрыто

Взгляните на этот код, скрывает предупреждение через определенное время

если вы хотите показать предупреждение о каком-либо действии, вы можете включить состояние, связанное с этим предупреждением, и отключить его, когда вы хотите его скрыть.

У меня была похожая проблема. Моей целью было показать предупреждающее сообщение после закрытия модального окна. Я использую 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>

Мне нравится играть с предупреждениями: вот полный динамический пример, в котором я устанавливаю одно предупреждение и контролирую его в соответствии с моими требованиями.

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: мы устанавливаем цвет в соответствии с сообщением responsestrap или bootstrap: здесь мы помещаем содержимое того, что мы хотим отобразить

в конце вы замечаете, что window.setTimeout (() => установлено на тайм-аут в 8000 (8 секунд)

не забудьте добавить свои состояния в конструктор.

Надеюсь, это поможет: D