Zhanna_K
@Zhanna_K
in progress

Как скрыть компонент в React при клике вне компонента?

Нашла только варианты с использованием методов жизненного цикла.

Я использую не классовые, а функциональные компоненты. Как это сделать с помощью хуков?
  • Вопрос задан
  • 81 просмотр
Решения вопроса 2
8XL
@8XL
Я высокий, но ниже, чем вы подумали.
React.useEffect(()=>{
  document.addEventListener('onmousedown', handleClick)
    return()=> document.removeEventListener('onmousedown', handleClick)
}, [])


Объяснение:
React.useEffect(()=>{
//вешаем листенер
  document.addEventListener('onmousedown', handleClick) 
// в зависимости хука заносим пустой массив. Таким образом мы с помощью хука выполним метод
 //componentDidMount(), вызвав useEffect 1 раз
}, [])


React.useEffect(()=>{
...какой-то код...
//удаляем листенер
 return ()=> document.removeEventListener('onmousedown', handleClick)
//после return прописываем методы, которые нужно выполнить после при размонтировании компонента
//componentWillUnmount() аналог на хуках
}, [])


про useRef очень доступно и удобно написано в документации. Принцип такой же, как в вашем примере, только обращение к свойствам немножко иначе (refName.current...)
Ответ написан
Zhanna_K
@Zhanna_K Автор вопроса
in progress
Нашла такую штуку.
Если вы, как и я используете библиотеку Material UI, то у нее есть компонент
<ClickAwayListener onClickAway={handleClose}> </ClickAwayListener>

который позволяет слушать клики вне компонента.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
На хуках вполне себе жизненный цикл реализуется https://reactjs.org/docs/hooks-reference.html#useeffect
Только не могу в голову взять при чем здесь жизненный цикл и клик вне компонента.
Ответ написан
insidermike
@insidermike
Можете задать состояние компоненту и по клику менять состояние. В рендере показывать или убирать дочерний компонент в зависимости от состояния.

export const Foo = () = {
const [toggle, setToggle] = useState(false);

render (
<div onClick={() => setToggle(!toggle)}>Скрыть компонент</div>
{toggle ?  null : <Baz />}
)
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы