Я хочу закрыть раскрывающееся меню, когда клик происходит за пределами раскрывающегося компонента.
Как это сделать?
Я хочу закрыть раскрывающееся меню, когда клик происходит за пределами раскрывающегося компонента.
Как это сделать?
В элементе я добавил mousedown
и mouseup
следующим образом:
onMouseDown={this.props.onMouseDown} onMouseUp={this.props.onMouseUp}
Затем в родительском я делаю это:
componentDidMount: function () {
window.addEventListener('mousedown', this.pageClick, false);
},
pageClick: function (e) {
if (this.mouseIsDownOnCalendar) {
return;
}
this.setState({
showCal: false
});
},
mouseDownHandler: function () {
this.mouseIsDownOnCalendar = true;
},
mouseUpHandler: function () {
this.mouseIsDownOnCalendar = false;
}
showCal
является логическим, когда true
показывает в моем случае календарь и false
скрывает его.
Использование методов жизненного цикла добавляет и удаляет прослушиватели событий в документе.
React.createClass({
handleClick: function (e) {
if (this.getDOMNode().contains(e.target)) {
return;
}
},
componentWillMount: function () {
document.addEventListener('click', this.handleClick, false);
},
componentWillUnmount: function () {
document.removeEventListener('click', this.handleClick, false);
}
});
Посмотрите строки 48-54 этого компонента: https://github.com/i-like-robots/react-tube-tracker/blob/91dc0129a1f6077bef57ea4ad9a860be0c600e9d/app/component/tube-tracker.jsx#L48-54
Посмотрите на цель события, если событие было непосредственно на компоненте или дочерних элементах этого компонента, тогда щелчок находился внутри. В противном случае это было снаружи.
React.createClass({
clickDocument: function(e) {
var component = React.findDOMNode(this.refs.component);
if (e.target == component || $(component).has(e.target).length) {
// Inside of the component.
} else {
// Outside of the component.
}
},
componentDidMount: function() {
$(document).bind('click', this.clickDocument);
},
componentWillUnmount: function() {
$(document).unbind('click', this.clickDocument);
},
render: function() {
return (
<div ref='component'>
...
</div>
)
}
});
Если это нужно использовать во многих компонентах, это лучше с mixin:
var ClickMixin = {
_clickDocument: function (e) {
var component = React.findDOMNode(this.refs.component);
if (e.target == component || $(component).has(e.target).length) {
this.clickInside(e);
} else {
this.clickOutside(e);
}
},
componentDidMount: function () {
$(document).bind('click', this._clickDocument);
},
componentWillUnmount: function () {
$(document).unbind('click', this._clickDocument);
},
}
См. пример здесь: https://jsfiddle.net/0Lshs7mg/1/
В вашем конкретном случае использования принятый в настоящее время ответ является слишком сложным. Если вы хотите прослушать, когда пользователь выйдет из выпадающего списка, просто используйте компонент <select>
в качестве родительского элемента и присоедините к нему обработчик onBlur
.
Единственные недостатки этого подхода заключаются в том, что он предполагает, что пользователь уже сосредоточился на элементе, и он полагается на элемент управления формой (который может или не может быть тем, что вы хотите, если учесть, что tab
key также фокусирует и стирает элементы), но эти недостатки являются действительно предел для более сложных случаев использования, и в этом случае может потребоваться более сложное решение.
var Dropdown = React.createClass({
handleBlur: function(e) {
// do something when user clicks outside of this element
},
render: function() {
return (
<select onBlur={this.handleBlur}>
...
</select>
);
}
});
Я написал общий обработчик событий для событий, которые происходят за пределами компонента, react-outside-event.
Сама реализация проста:
window
прикрепляется обработчик событий.onOutsideEvent
в целевом компоненте.import React from 'react';
import ReactDOM from 'react-dom';
/**
* @param {ReactClass} Target The component that defines `onOutsideEvent` handler.
* @param {String[]} supportedEvents A list of valid DOM event names. Default: ['mousedown'].
* @return {ReactClass}
*/
export default (Target, supportedEvents = ['mousedown']) => {
return class ReactOutsideEvent extends React.Component {
componentDidMount = () => {
if (!this.refs.target.onOutsideEvent) {
throw new Error('Component does not defined "onOutsideEvent" method.');
}
supportedEvents.forEach((eventName) => {
window.addEventListener(eventName, this.handleEvent, false);
});
};
componentWillUnmount = () => {
supportedEvents.forEach((eventName) => {
window.removeEventListener(eventName, this.handleEvent, false);
});
};
handleEvent = (event) => {
let target,
targetElement,
isInside,
isOutside;
target = this.refs.target;
targetElement = ReactDOM.findDOMNode(target);
isInside = targetElement.contains(event.target) || targetElement === event.target;
isOutside = !isInside;
if (isOutside) {
target.onOutsideEvent(event);
}
};
render() {
return <Target ref='target' {... this.props} />;
}
}
};
Чтобы использовать компонент, вам нужно обернуть объявление класса целевого компонента с помощью компонента более высокого порядка и определить события, которые вы хотите обработать:
import React from 'react';
import ReactDOM from 'react-dom';
import ReactOutsideEvent from 'react-outside-event';
class Player extends React.Component {
onOutsideEvent = (event) => {
if (event.type === 'mousedown') {
} else if (event.type === 'mouseup') {
}
}
render () {
return <div>Hello, World!</div>;
}
}
export default ReactOutsideEvent(Player, ['mousedown', 'mouseup']);
Я проголосовал за один из ответов, хотя это не сработало для меня. Это привело меня к этому решению. Я немного изменил порядок операций. Я слушаю mouseDown на цель и mouseUp на цель. Если любой из них возвращает TRUE, мы не закрываем модальный. Как только клик зарегистрирован, где угодно, эти два логических значения (mouseDownOnModal, mouseUpOnModal) возвращаются к false.
componentDidMount() {
document.addEventListener('click', this._handlePageClick);
},
componentWillUnmount() {
document.removeEventListener('click', this._handlePageClick);
},
_handlePageClick(e) {
var wasDown = this.mouseDownOnModal;
var wasUp = this.mouseUpOnModal;
this.mouseDownOnModal = false;
this.mouseUpOnModal = false;
if (!wasDown && !wasUp)
this.close();
},
_handleMouseDown() {
this.mouseDownOnModal = true;
},
_handleMouseUp() {
this.mouseUpOnModal = true;
},
render() {
return (
<Modal onMouseDown={this._handleMouseDown} >
onMouseUp={this._handleMouseUp}
{/* other_content_here */}
</Modal>
);
}
Это имеет то преимущество, что весь код принадлежит дочернему компоненту, а не родительскому. Это означает, что при повторном использовании этого компонента нет кода шаблона для копирования.
.backdrop
)..target
) вне элемента .backdrop
и с большим индексом укладки (z-index
).Тогда любой щелчок на элементе .backdrop
будет считаться "вне элемента .target
".
.click-overlay {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
}
.target {
position: relative;
z-index: 2;
}
Вы можете использовать ref
для достижения этого, что-то вроде следующего должно работать.
Добавьте ref
в свой элемент:
<div ref={(element) => { this.myElement = element; }}></div>
Затем вы можете добавить функцию для обработки щелчка вне элемента следующим образом:
handleClickOutside(e) {
if (!this.myElement.contains(e)) {
this.setState({ myElementVisibility: false });
}
}
Затем, наконец, добавьте и удалите прослушиватели событий, которые будут монтироваться и будут отключены.
componentWillMount() {
document.addEventListener('click', this.handleClickOutside, false); // assuming that you already did .bind(this) in constructor
}
componentWillUnmount() {
document.removeEventListener('click', this.handleClickOutside, false); // assuming that you already did .bind(this) in constructor
}
Супер опоздал на вечеринку, но у меня был успех с установкой события размытия на родительский элемент выпадающего списка с соответствующим кодом для закрытия раскрывающегося списка, а также прикрепление слушателя mousedown к родительскому элементу, который проверяет, раскрывающееся меню открыто или нет, и остановит распространение события, если оно открыто, чтобы событие размытия не срабатывало.
Так как событие mousedown пузырится вверх, это предотвратит появление укусов на родителях у детей.
/* Some react component */
...
showFoo = () => this.setState({ showFoo: true });
hideFoo = () => this.setState({ showFoo: false });
clicked = e => {
if (!this.state.showFoo) {
this.showFoo();
return;
}
e.preventDefault()
e.stopPropagation()
}
render() {
return (
<div
onFocus={this.showFoo}
onBlur={this.hideFoo}
onMouseDown={this.clicked}
>
{this.state.showFoo ? <FooComponent /> : null}
</div>
)
}
...
e.preventDefault() не нужно вызывать, насколько я могу рассуждать, но firefox не играет хорошо без него по какой-либо причине. Работает на Chrome, Firefox и Safari.
Я нашел более простой способ об этом.
Вам просто нужно добавить onHide(this.closeFunction)
в модальный
<Modal onHide="this.closeFunction">
...
</Modal>
Предполагая, что у вас есть функция для закрытия модального.
Используйте отличный react-onclickoutside mixin:
npm install --save react-onclickoutside
И затем
var Component = React.createClass({
mixins: [
require('react-onclickoutside')
],
handleClickOutside: function(evt) {
// ...handling code goes here...
}
});