Was wäre der richtige Weg, um einen Klick außerhalb einer einzelnen Komponente zu behandeln, die diese Komponente verbergen soll?
Ein Beispiel für eine solche Komponente könnte ein Dropdown-Menü, ein Datumszähler und dergleichen sein. Wir erwarten normalerweise, dass sie sich verstecken, wenn wir nach draußen klicken. Aber dazu scheint es, als müssten wir einige "unreine" Hacks ausführen, von denen ich nicht weiß, wie sie im FRP-Stil vermieden werden können.
Ich suchte nach relevanten React-Beispielen für Ideen und fand dies , aber sie scheinen alle darauf angewiesen zu sein, Callbacks an globale Objekte anzuhängen, die dann den Status der internen Komponente ändern.
Das folgende Beispiel, das etwas Ähnliches tut, was Sie beschreiben.
modal wird mit einer Adresse (um ein 'discuss' Ereignis zu senden), den aktuellen Fensterdimensionen und einer elm-html Html Komponente (die zu fokussierende Sache ist, wie ein Datepicker oder ein Form).
Wir fügen einen Klick-Handler an das umgebende Element an; Nachdem wir ihm eine passende ID gegeben haben, können wir herausfinden, ob empfangene Klicks auf ihn oder das Kind zutreffen, und diese entsprechend weiterleiten. Das einzige wirklich schlaue Bit ist die Bereitstellung von customDecoder , um Klicks auf das Kindelement herauszufiltern.
Anderswo ändert sich unser Modellzustand bei Erhalt des 'dismiss' -Ereignisses so, dass wir nicht mehr modal aufrufen müssen.
Dies ist ein recht großes Codebeispiel, das einige wenige Ulme-Pakete verwendet. Fragen Sie also bitte nach, ob etwas weitere Erklärungen benötigt.
%Vor% Die vorhandene Antwort funktioniert nicht in Ulme v0.18 ( Signal wurde in 0.17 entfernt), also wollte ich sie aktualisieren. Die Idee ist, einen transparenten Hintergrund auf oberster Ebene hinter dem Dropdown-Menü hinzuzufügen. Dies hat den Bonuseffekt, dass Sie alles hinter dem Menü verdunkeln können, wenn Sie möchten.
Dieses Beispielmodell hat eine Liste von Wörtern, und jedes Wort kann ein offenes Dropdown (und einige zugehörige Informationen) haben, also übergebe ich sie, um zu sehen, ob irgendwelche von ihnen offen sind. In diesem Fall zeige ich das Hintergrunddiv an vor allem anderen:
Es gibt einen Hintergrund in der Hauptansicht-Funktion:
%Vor% CloseDropdowns wird in der Top-Level-Update-Funktion der App behandelt:
Und gestylt Dinge mit scss:
%Vor%Tags und Links elm