Логика при создании модального окна?

Question

[connecter]

Всем привет, подскажите логику, как сделать открытие/закрытие модального окна при:
1. Открывается при клике по кнопке-компоненту (Button) в другом компоненте (Main)
2. Закрывается по клику обычного дива в самом компоненте модального окна (Modal)

Соответственно, есть Main, в нем есть Button и Modal

Answer 1

[Иван В]

В Main добавляете state, например, "показать-модалку" со значением false по умолчанию.
Также в Main делаете фунцию, например, "switchModal" в которой делаете setState({ "показать-модалку": !this.state."показать-модалку"}). На Button вешаете "switchModal" по клику.

Modal показываете в зависимости от state. Типа
{"показать-модалку" && <Modal />}

В сам Modal передаете props с функцией "switchModal".

Внутри Modal делаете функцию
closeModal = () => { this.props.switchModal() }
Вешаете "closeModal" на элемет по клику на который хотите закрывать Modal.

Comments

[connecter]

Если Button это компонент, то onClick передастся как props onClick в Button, будет ли изменятся state в Main, если я буду обрабатывать событие переданное через пропс onClick в компоненте Button?

[Иван В]

connecter,
если честно, не понял ваш вопрос )

В Main есть функция "switchModal" (которая меняет стейт Main), а еще в Main есть компонент .
Кликаем на Button, меняется стейт в Main.

[connecter]

Иван В, Ну смотрите, есть компонент Button, если передавать <Button onClick={...}/> то onClick передасться как props, то как мне передать событие onClick, чтобы менялся стейт в Main

[Иван В]

connecter,

допустим, у Main есть функция "mainFunction". Тогда пишем так -
<Button mainFunction={this.mainFunction} />

Внутри Button сделайте функцию, типа

buttonFunction = () => { this.props.mainFunction() }

onClick={this.buttonFunction} вешаете на нужный элемент внутри компонента Button.

Тогда при клике на элемент внутри Button будет вызываться mainFunction в компоненте Main.

Answer 2

[Сергей Сунцев]

Очень сильно поддерживаю вариант с созданием портала
В остальном аналогично ответу Иван В
Создаем состояние в стейте, либо сторе,
По клику вызываете методы, которые открывают/закрывают портал.

Answer 3

[profesor08]

По клику на кнопку установи передай пропс состояния в модалку.

Comments

[connecter]

А дальше как? Как Main компоненту понять, что модалка закрылась?

[profesor08]

connecter, кинь ивент