Как зафиксировать клик за пределами компонента React
Я начал изучать React и пытаюсь реализовать модальное окно. Я одновременно использую TypeScript.
Я хотел зафиксировать щелчок за пределами моего компонента React, поэтому, когда я щелкаю за пределами модального окна, это закрывается. Я основывал свой подход на этом: Как зафиксировать клик за пределами компонента React
import styled from 'styled-components';
const StyledModal = styled.div`
width: 100%;
background-color: #fff;
box-shadow: 0 0 0.625rem, rgba(0, 0, 0, 0.2);
@media (min-width: 576px) {
width: 32rem;
},
`;
class Modal extends React.Component<ModalProps> {
private modal: HTMLDivElement;
onOutsideClick = (e: any) => {
if (!_.isNil(this.modal)) {
if (!this.modal.contains(e.target)) {
this.onClose(e);
}
}
}
componentDidMount() {
document.addEventListener('mousedown', this.onOutsideClick, false);
}
componentWillMount() {
document.removeEventListener('mousedown', this.onOutsideClick, false);
}
render() {
<div>
<StyledModal ref = {(node: any) => { this.modal = node; }}>
...
</StyledModal>
</div>
}
}
Проблема в том, что всякий раз, когда я щелкаю внутри или снаружи модального окна, я получаю эту ошибку, и я не знаю, что это такое и как ее исправить:
Любые огни, пожалуйста, дайте мне знать ...
Ответы 3
Поскольку ваш StyledModal - styled-components, вам нужно добавить innerRef, чтобы иметь возможность получить узел DOM. Имейте в виду, что innerRef является настраиваемой опорой только для styled-components.
<StyledModal innerRef = {(node: any) => { this.modal = node; }}>
...
</StyledModal>
StyledModal - это не настраиваемый компонент, это просто стилизованный компонент. Пожалуйста, проверьте мой обновленный фрагмент кода
Я считаю, что вам просто нужно вместо этого добавить innerRef.
Я отредактировал свой ответ на для вас. styled-components - это оболочка над узлами DOM, поэтому вам нужно использовать innerRef вместо ref.
Начиная с версии styled-components v4, это опора ref.
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
render() {
return (
<Input
ref = {this.inputRef}
/>
);
}
Для получения дополнительной информации Ссылки
Если вы хотите использовать крошечный компонент (466 байт, сжатый в сжатом виде), который уже существует для этой функции, вы можете проверить эту библиотеку реакция-выход. Он позволяет захватывать клики за пределами компонента.
Преимущество библиотеки в том, что она также позволяет обнаруживать щелчки вне одного компонента и внутри другого. Он также поддерживает обнаружение других типов событий.
вы можете сделать рабочий пример или коды для своего кода?