Clojurescript re-frame: Fokus auf ein neu erstelltes Element ändern

Question

Ich erstelle eine Re-Frame-App mit einer Liste von Texteingabefeldern. Ich möchte das Verhalten sein, dass, wenn der Benutzer RETURN drückt, eine neue Zeile erstellt wird und der Fokus auf der neuen Zeile platziert wird. Ich habe bei der Schaffung der neuen Reihe gelang es jedoch, wenn ich den Fokus auf diese neue Zeile mit dieser Aufforderung innerhalb change-focus Event-Handler zu ändern versuchen:

(.focus (.getElementById js/document focus-element))

Ich erhalte eine Fehlermeldung: Cannot read property 'focus' of null.

Ich nehme an, dass, weil die Ansicht die neu erstellte Zeile noch nicht gerendert hat. Was ist der beste Weg, um den Fokus auf ein neues Element zu ändern, indem man den Frame neu anlegt?

Sollte ich die Active-Zeile in meinem Zustand Atom setzen und das in der Ansicht rendern? Oder möglicherweise ein anderes Ereignis auslösen, nachdem die Ansicht gerendert wurde? Ich würde etwas Input lieben.

Answer 1

Wenn jede Zeile, die Ihr Formular hinzufügt, eine Komponente ist, können Sie den Handler auf componentDidMount Lifecycle Callback setzen. Es wird nach der bereits gerenderten Komponente aufgerufen. Um dies zu tun in re-frame sollten Sie reagent ‚s create-class wie die

(defn my-row [input-id] 
    (reagent/create-class 
    {:component-did-mount 
    #(.focus (.getElementById js/document input-id)) 
    :reagent-render 
    (fn [input-id] 
     [:div.form-group 
     [:input.form-control {:id input-id, :type "text"}]])})) 

Sie verwenden versuchen, mit React.JS Refs zu spielen oder reagent/dom-node anstelle von JS Interop Code in componentDidMount Handler-Funktion.