При отправке формы я хочу показать небольшое всплывающее окно на 2,5 секунды, если сервер отправляет неверный ответ.
Логика довольно проста, однако я не могу понять, как заставить это всплывающее окно прослушивать логическое значение где-то в управлении состоянием (в моем случае MobX). Я могу просто получить содержимое во всплывающем окне, однако триггер представляет собой кнопку (и содержимое будет отображаться, если вы нажмете на нее). Но как мне заставить его где-то прослушивать логическое значение?
Довольно простой класс здесь:
import React from "react";
import { Popup, Button } from "semantic-ui-react";
import { inject } from "mobx-react";
const timeoutLength = 2500;
@inject("store")
export default class ErrorPopup extends React.Component {
state = {
isOpen: false
};
handleOpen = () => {
this.setState({
isOpen: true
});
this.timeout = setTimeout(() => {
this.setState({
isOpen: false
})
}, timeoutLength)
};
handleClose = () => {
this.setState({
isOpen: false
});
clearTimeout(this.timeout)
};
render () {
const errorContent = this.props.data;
if(errorContent){
return(
<Popup
trigger={<Button content='Open controlled popup' />}
content={errorContent}
on='click'
open={this.state.isOpen}
onClose={this.handleClose}
onOpen={this.handleOpen}
position='top center'
/>
)
}
}
}
Однако значением триггера является кнопка, которая отображается, если присутствует this.props.data
. Но это не то поведение, которое я хочу; Я просто хочу, чтобы всплывающее окно отображалось (и, следовательно, срабатывало), если this.props.data
есть; в качестве альтернативы я могу предоставить значение true
с реквизитами, если это необходимо.
Но как мне заставить этот компонент срабатывать, не будучи наведением/кнопкой?
open
на самом деле является переходом к компонентуPortal
(он используетсяPopup
). Это также имеет смысл, почему закрыть его можно только таким образом. Когда вы передаетеopen=true
, вы фактически передаете этоPortal
, однако компонентPopup
позиционируется статически и, следовательно, не знает координат, в которых он должен находиться. Вот почему его можно открыть только через событие — они используют объектEvent
для получения позиции курсора. См. github.com/Semantic-Org/Semantic-UI-React/issues. /1065 - person losnir   schedule 03.07.2017