RiotJS Onclick Triggerung auf Last

Question

Ich schreibe eine Tabelle Anwendung mit RiotJS und ich laufe immer wieder auf das gleiche Problem mit dem Onclick-Ereignis. Fast versuchen jedes Mal, wenn ich die

<tag onclick={somefunction}>

ich sehr erratische Verhalten bekommen zu verwenden. Manchmal wird die Funktion eine ganze Reihe von Malen aufgerufen, wenn die Seite geladen oder aktualisiert wird, und reagiert dann überhaupt nicht auf Klicks. In anderen Fällen wird sie beim Start mehrmals ausgelöst. Ich kann kein Muster hinter dem Problem finden, obwohl ich bemerkt habe, dass es ein Problem mit Inline-Funktionsaufrufen, z.

<tag onclick={console.log("foo")}>

und weniger häufig mit Bezug vorbei <tag onclick={function}> obwohl es mit beiden passiert. Hat jemand so etwas erlebt? Bitte kommentieren Sie, wenn Sie mehr Kontext benötigen.

Answer 1

In Riot werden die {} Ausdrücke bei Mount/Update-Zeit ausgewertet.

Dies bedeutet, dass, wenn was innerhalb des {} ist ein Funktionsaufruf ist, es ausgeführt wird, wenn das eingehängte Tag aktualisiert wird, jedes Mal, wenn der Abschnitt in es ausgewertet wird.

Dies ist anders als Vanille Javascript, wo onclick nicht einmal geparst wird, bis das Ding angeklickt wird.

Dies kann zu einiger Verwirrung führen, weil Riot nicht immer {} Ausdrücke analysiert, wie Sie denken. Dies ist besonders problematisch, mit Verbindung Ausdrücke (die mit Booleschen Logik || und && etc.)

In diesem Fall onclick in Riot ist für einen Ausdruck/Funktion suchen ... und es wird versuchen, es in Bezug auf die bewerten Tag selbst ... in anderen Worten, dies:

<button onclick={foobar}>Click me!</button>

Riot wird versuchen this.foobar() auszuführen, wenn darauf geklickt.

Im Allgemeinen versuche ich, dies auszunutzen, indem ich meine Methoden auf diese im <script> Teil des Etiketts setze. Dies lässt sehr wenig Spielraum für Fehlinterpretationen meiner {} Ausdrücke und verschiebt die Bits der Logik aus dem HTML-Teil des Tags heraus und dorthin, wo ich das Verhalten erwarte, im Skriptabschnitt.