React.js: логика обработки модального окна

274

31 октября 2018, 16:30

Не могу понять, каким образом стоит отлавливать действия пользователя в модальном окне.

У меня есть родительский компонент, есть компонент модального окна и логическая функция. Логическая функция вызывает диалоговое модальное окно.

Задача (миссия невыполнима!) приостановить дальнейшее выполнение функции до получения фидбека от пользователя (как приостановить выполнение? как получить фидбек и передать прямо в функцию? как понять, что он получен?), затем продолжить функцию.

Условно говоря:

openIfWrong(array){ 
array.forEach((item, i)=> {
if(item==2) 
   this.modal.open();
 <....> 
);}

И после того, как окно было открыто, мне нужно дождаться фидбека от пользователя, и только после получения оного функция должна продолжиться.

На данный момент функция, из которой вызывается окно, продолжает работать.

Будучи новичком в реакте, не могу придумать, как это сделать, и не могу корректно сформулировать свой запрос гуглу.

Буду благодарна за любую помощь.

Answer 1

Например в функции вызова окна предусмотреть указание callback-функции в качестве параметра. В окне при определенном действии вызвать callback-функцию в которой передать данные действий в окне. Схематичный пример:

open() {
    this.modal.open(this.onConfirm, this.onCancel);
}
onConfirm = (data) => {
    this.modal.close();
    this.someAction();
}
onCancel = () => {
    this.modal.close();
    this.anotherAction();
}

многое зависит от способов реализации модального окна и приложения, его вызывающего