如何侦听组件外部的单击事件

当单击发生在下拉组件之外时，我想关闭下拉菜单。

我该怎么做？

76655 次浏览
小开

Using the life-cycle methods add and remove event listeners to the document.

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);
}
});

Check out lines 48-54 of this component: https://github.com/i-like-robots/react-tube-tracker/blob/91dc0129a1f6077bef57ea4ad9a860be0c600e9d/app/component/tube-tracker.jsx#L48-54

小开

Look at the target of the event, if the event was directly on the component, or children of that component, then the click was inside. Otherwise it was outside.

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>
)
}
});

If this is to be used in many components, it is nicer with a 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);
},
}

See example here: https://jsfiddle.net/0Lshs7mg/1/

小开
最佳答案

In the element I have added mousedown and mouseup like this:

onMouseDown={this.props.onMouseDown} onMouseUp={this.props.onMouseUp}

Then in the parent I do this:

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;
}

The showCal is a boolean that when true shows in my case a calendar and false hides it.

小开
  1. Create a fixed layer that spans the whole screen (.backdrop).
  2. Have the target element (.target) outside the .backdrop element and with a greater stacking index (z-index).

Then any click on the .backdrop element will be considered "outside of the .target element".

.click-overlay {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
}


.target {
position: relative;
z-index: 2;
}
小开

For your specific use case, the currently accepted answer is a tad over-engineered. If you want to listen for when a user clicks out of a dropdown list, simply use a <select> component as the parent element and attach an onBlur handler to it.

The only drawbacks to this approach is that it assumes the user has already maintained focus on the element, and it relies on a form control (which may or may not be what you want if you take into account that the tab key also focuses and blurs elements) - but these drawbacks are only really a limit for more complicated use cases, in which case a more complicated solution might be necessary.

 var Dropdown = React.createClass({


handleBlur: function(e) {
// do something when user clicks outside of this element
},


render: function() {
return (
<select onBlur={this.handleBlur}>
...
</select>
);
}
});
小开

I have written a generic event handler for events that originate outside of the component, react-outside-event.

The implementation itself is simple:

  • When component is mounted, an event handler is attached to the window object.
  • When an event occurs, the component checks whether the event originates from within the component. If it does not, then it triggers onOutsideEvent on the target component.
  • When component is unmounted, the event handler is detacthed.
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} />;
}
}
};

To use the component, you need wrap the target component class declaration using the higher order component and define the events that you want to handle:

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']);
小开

I voted up one of the answers even though it didn't work for me. It ended up leading me to this solution. I changed the order of operations slightly. I listen for mouseDown on the target and mouseUp on the target. If either of those return TRUE, we don't close the modal. As soon as a click is registered, anywhere, those two booleans { mouseDownOnModal, mouseUpOnModal } are set back to 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>
);
}

This has the advantage that all the code rests with the child component, and not the parent. It means that there's no boilerplate code to copy when reusing this component.

小开

Use the excellent react-onclickoutside mixin:

npm install --save react-onclickoutside

And then

var Component = React.createClass({
mixins: [
require('react-onclickoutside')
],
handleClickOutside: function(evt) {
// ...handling code goes here...
}
});
小开

Super late to the party, but I've had success with setting a blur event on the parent element of the dropdown with the associated code to close the dropdown, and also attaching a mousedown listener to the parent element that checks if the dropdown is open or not, and will stop the event propagation if it is open so that the blur event won't be triggered.

Since the mousedown event bubbles up this will prevent any mousedown on children from causing a blur on the parent.

/* 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() shouldn't have to be called as far as I can reason but firefox doesn't play nice without it for whatever reason. Works on Chrome, Firefox, and Safari.

小开

You could use refs to achieve this, something like the following should work.

Add the ref to your element:

<div ref={(element) => { this.myElement = element; }}></div>

You can then add a function for handling the click outside of the element like so:

handleClickOutside(e) {
if (!this.myElement.contains(e)) {
this.setState({ myElementVisibility: false });
}
}

Then finally, add and remove the event listeners on will mount and will unmount.

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
}
小开

I found a simpler way about this.

You just need to add onHide(this.closeFunction) on the modal

<Modal onHide={this.closeFunction}>
...
</Modal>

Assuming you have a function to close the modal.


提交答案