reattivo: componente-ha-mount

Question

sto cercando di impostare il focus iniziale su un elemento di input

(defn initial-focus-wrapper [element] 
    (with-meta element 
    {:component-did-mount #(.focus (reagent/dom-node %))})) 

(defn chat-input [] 
    (fn [] 
    [initial-focus-wrapper 
     [:input {:type "text"}]])) 

Questo non funziona per me però. Che cosa sto facendo di sbagliato?

Answer 1

Come sbensu dice with-meta sembra funzionare solo in reattivo su una funzione. Ciò significa che può essere utilizzato con identity per produrre un wrapper riutilizzabile come sperato

(def initial-focus-wrapper 
    (with-meta identity 
    {:component-did-mount #(.focus (reagent/dom-node %))})) 

(defn chat-input [] 
    (fn [] 
    [initial-focus-wrapper 
     [:input {:type "text"}]])) 

Answer 2

Penso che with-meta debba svolgere una funzione come argomento. Dalla documentazione:

(def my-html (atom "")) 

(defn plain-component [] 
    [:p "My html is " @my-html]) 

(def component-with-callback 
    (with-meta plain-component 
    {:component-did-mount 
    (fn [this] 
     (reset! my-html (.-innerHTML (reagent/dom-node this))))})) 

Così il vostro codice dovrebbe essere:

(defn initial-focus-wrapper [element] 
    (with-meta element 
    {:component-did-mount #(.focus (reagent/dom-node %))})) 

(defn chat-input [] 
    [initial-focus-wrapper 
    (fn [] 
     [:input {:type "text"}]]))