Автоматическое оповещение о реакции

Question

Я новичок в React и использую Alert - Увольнение из Reactstrap, мне нужно, чтобы предупреждение автоматически исчезало через 2 с. Я пытался найти какую-то функцию, которая могла бы быть выполнена, но, к сожалению, я этого не сделал. Спасибо за помощь

Answer 1

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

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

Answer 2

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

Answer 3

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

Сначала нам нужно установить оповещение. Если вы используете 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