Есть две компоненты родительская и дочерняя (header). Как сделать так чтоб при клике на элемент в хедере окошко всплывало, на на клик в любой области за этим окошком окно скрывалось
-
Вопрос совсем непонятен...– xFloooo25 авг 2017 в 6:21
-
вопспользовалась данным решением, установила соответсвенно библиотеку npm install semantic-ui-react, все сработало но в консоли теперь ошибки. Подскажите пожалуйста что делать? – Евгения Дегтярева14 янв 2021 в 11:02
2 ответа
Это называется модальное окно (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) Если клик на элемент в компоненте "А", должен влиять на компонент "Б", то вам нужен глобальный стор. Например: Redux.
Алгоритм простой: по клику меняем значение переменной в сторе, а в компоненте2 вешаем\снимаем класс в зависимости от значения этой переменной, или вообще рендерим\не рендерим блок.
2) Для того, чтобы обработать событие клика "вне" элемента, можно воспользоваться HOC.