Ich möchte ein Dropdown-Menü schließen, wenn ein Klick außerhalb der Dropdown-Komponente auftritt.
Wie mache ich das?
In dem Element, das ich hinzugefügt habe mousedown
und das mouseup
gefällt:
onMouseDown={this.props.onMouseDown} onMouseUp={this.props.onMouseUp}
Dann mache ich beim Elternteil Folgendes:
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;
}
Das showCal
ist ein Boolescher Wert, der true
in meinem Fall einen Kalender anzeigt und false
versteckt.
preventDefault()
die Ereignisse sofort aufrufen müssen oder das native Android-Verhalten einsetzt, das durch die Vorverarbeitung von React beeinträchtigt wird. Ich habe seitdem npmjs.com/package/react-onclickoutside geschrieben .Mithilfe der Lebenszyklusmethoden können Sie dem Dokument Ereignis-Listener hinzufügen und daraus entfernen.
Überprüfen Sie die Zeilen 48-54 dieser Komponente: https://github.com/i-like-robots/react-tube-tracker/blob/91dc0129a1f6077bef57ea4ad9a860be0c600e9d/app/component/tube-tracker.jsx#L48-54
quelle
Sehen Sie sich das Ziel des Ereignisses an. Wenn sich das Ereignis direkt auf der Komponente oder untergeordneten Elementen dieser Komponente befand, befand sich der Klick im Inneren. Ansonsten war es draußen.
Wenn dies in vielen Komponenten verwendet werden soll, ist es mit einem Mixin schöner:
Siehe Beispiel hier: https://jsfiddle.net/0Lshs7mg/1/
quelle
this.refs.component
bezieht sich auf das DOM-Element abFür Ihren speziellen Anwendungsfall ist die derzeit akzeptierte Antwort etwas überarbeitet. Wenn Sie warten möchten, wenn ein Benutzer aus einer Dropdown-Liste klickt, verwenden Sie einfach eine
<select>
Komponente als übergeordnetes Element und fügen Sie eine hinzuonBlur
Handler hinzu.Der einzige Nachteil dieses Ansatzes besteht darin, dass davon ausgegangen wird, dass der Benutzer den Fokus auf das Element bereits beibehalten hat, und dass er sich auf ein Formularsteuerelement stützt (das möglicherweise das ist, was Sie möchten oder nicht, wenn Sie berücksichtigen, dass der
tab
Schlüssel auch Elemente fokussiert und verwischt ) - aber diese Nachteile sind nur eine Grenze für kompliziertere Anwendungsfälle. In diesem Fall könnte eine kompliziertere Lösung erforderlich sein.quelle
onBlur
div funktioniert auch mit div, wenn estabIndex
Attribut hatIch habe einen generischen Ereignishandler für Ereignisse geschrieben, die außerhalb der Komponente " Reagieren außerhalb des Ereignisses" entstehen .
Die Implementierung selbst ist einfach:
window
Objekt angehängt .onOutsideEvent
die Zielkomponente ausgelöst.Um die Komponente zu verwenden, müssen Sie die Deklaration der Zielkomponentenklasse mit der Komponente höherer Ordnung umbrechen und die Ereignisse definieren, die Sie behandeln möchten:
quelle
Ich habe eine der Antworten gewählt, obwohl es bei mir nicht funktioniert hat. Es führte mich schließlich zu dieser Lösung. Ich habe die Reihenfolge der Operationen leicht geändert. Ich höre auf mouseDown auf dem Ziel und mouseUp auf dem Ziel. Wenn einer von beiden TRUE zurückgibt, schließen wir das Modal nicht. Sobald ein Klick registriert ist, werden diese beiden Booleschen Werte {mouseDownOnModal, mouseUpOnModal} auf false zurückgesetzt.
Dies hat den Vorteil, dass der gesamte Code bei der untergeordneten Komponente und nicht bei der übergeordneten Komponente liegt. Dies bedeutet, dass bei der Wiederverwendung dieser Komponente kein Code für das Boilerplate kopiert werden muss.
quelle
.backdrop
)..target
) außerhalb des.backdrop
Elements und mit einem größeren Stapelindex (z-index
).Dann wird jeder Klick auf das
.backdrop
Element als "außerhalb des.target
Elements" betrachtet.quelle
Du könntest benutzen
ref
s verwenden, um dies zu erreichen. So etwas wie das Folgende sollte funktionieren.Fügen Sie das
ref
zu Ihrem Element hinzu:Sie können dann eine Funktion zum Behandeln des Klicks außerhalb des Elements wie folgt hinzufügen:
Fügen Sie dann schließlich die Ereignis-Listener hinzu und entfernen Sie sie, um sie zu aktivieren und zu deaktivieren.
quelle
handleClickOutside
indocument.addEventListener()
durch Zugabe vonthis
Referenz. Andernfalls gibt es Uncaught ReferenceError: handleClickOutside ist nicht definiert incomponentWillMount()
Super spät zur Party, aber ich hatte Erfolg damit, ein Unschärfeereignis für das übergeordnete Element der Dropdown-Liste mit dem zugehörigen Code festzulegen, um die Dropdown-Liste zu schließen, und dem übergeordneten Element einen Mousedown-Listener hinzuzufügen, der prüft, ob die Dropdown-Liste geöffnet ist oder nicht, und stoppt die Ereignisausbreitung, wenn sie geöffnet ist, damit das Unschärfeereignis nicht ausgelöst wird.
Da das Mousedown-Ereignis in die Luft sprudelt, wird verhindert, dass Mousedown bei Kindern zu Unschärfe bei den Eltern führt.
e.preventDefault () sollte nicht aufgerufen werden müssen, soweit ich das beurteilen kann, aber Firefox spielt ohne es aus irgendeinem Grund nicht gut. Funktioniert unter Chrome, Firefox und Safari.
quelle
Ich habe einen einfacheren Weg gefunden.
Sie müssen nur
onHide(this.closeFunction)
das Modal hinzufügenAngenommen, Sie haben eine Funktion zum Schließen des Modals.
quelle
Verwenden Sie das ausgezeichnete React-on-Click-Outside- Mixin:
Und dann
quelle