Правильно ли добавлять window.addEventListener к методу componentDidMount в реакции?
Я создаю новое приложение для заметок с помощью реакции и создаю модальное окно для добавления новой заметки.
для закрытия модального окна я добавляю addEventListener к window в методе App.js componentDidMount
const modal = document.querySelector('.modal');
const windowOnClick = (event) => {
if (event.target === modal) {
modal.classList.toggle('showModal');
this.setState({ isModalOpen: false });
}
}
window.addEventListener('click', windowOnClick);
это работа, но я хочу знать, является ли это лучшей практикой, чтобы сделать это в ответ?
Спасибо за ответ @etarhan
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Теперь вы можете сделать это в хуках,
что-то типа :
function toggleModal() {
const [isOpen, setModalState] = useState(false);
useEffect(() => {
const setToggle = () => setModalState(!isOpen);
window.addEventListener('click', windowOnClick);
return () => {
window.removeEventListener('click', windowOnClick);
};
});
return isOpen;
}
ИМХО, это, вероятно, более чистый способ. Поскольку React отходит от компонентов, основанных на классах (см. документацию React), и создает определенный хук для выполнения конкретной задачи, обычно в componentDidMount втискивается множество разных вещей, что, ИМХО, смешивает проблемы в методе жизненного цикла. Использование хука делает логику доступной и для других компонентов. См. документы React для получения дополнительной информации.
См. документы React для получения дополнительной информации.
Что делает это более «чистым», чем использование компонента класса и то же самое в жизненном цикле componentDidMount?
Да, я знаю, я не говорю, что вы не правы, но вы, возможно, могли бы добавить это объяснение к своему первоначальному ответу. Кроме того, как это отвечает на текущий вопрос? Не могли бы вы хотя бы привести пример использования пользовательского хука на основе текущего вопроса?
Нет, это обычный вариант использования. Если вы хотите закрыть модальное окно при нажатии в любом месте за пределами модального окна, это будет самый простой способ.