4

Есть две компоненты родительская и дочерняя (header). Как сделать так чтоб при клике на элемент в хедере окошко всплывало, на на клик в любой области за этим окошком окно скрывалось

2

2 ответа 2

5

Это называется модальное окно (modal window) Чтобы не изобретать велосипед, необходимо воспользоваться библиотеками, к примеру: 1) компонент Modal из semantic-ui-react 2) react-modal

Дальше пишете:

import React, { Component } from 'react'
import { Button, Header, Icon, Modal } from 'semantic-ui-react'

export default class ModalExampleControlled extends Component {
  state = { modalOpen: false }

  handleOpen = () => this.setState({ modalOpen: true })

  handleClose = () => this.setState({ modalOpen: false })

  render() {
    return (
      <Modal
        trigger={<Button onClick={this.handleOpen}>Show Modal</Button>}
        open={this.state.modalOpen}
        onClose={this.handleClose}
        basic
        size='small'
      >
        <Header icon='browser' content='Cookies policy' />
        <Modal.Content>
          <h3>This website uses cookies to ensure the best user experience.</h3>
        </Modal.Content>
        <Modal.Actions>
          <Button color='green' onClick={this.handleClose} inverted>
            <Icon name='checkmark' /> Got it
          </Button>
        </Modal.Actions>
      </Modal>
    )
  }
}
1

1) Если клик на элемент в компоненте "А", должен влиять на компонент "Б", то вам нужен глобальный стор. Например: Redux.

Алгоритм простой: по клику меняем значение переменной в сторе, а в компоненте2 вешаем\снимаем класс в зависимости от значения этой переменной, или вообще рендерим\не рендерим блок.

2) Для того, чтобы обработать событие клика "вне" элемента, можно воспользоваться HOC.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.