焦點和模糊成分的試劑

Question

這裏不同的組件動作後是我Clojurescript代碼：

(def focus-wrapper 
    (with-meta identity 
    {:component-did-update #(.focus (dom-node %))})) 

(defn solution-input [] 
    (let [current-char (subscribe [:current-char]) 
     input (subscribe [:input])] 
    [focus-wrapper 
     (fn [] 
     [:input {:type "text" 
       :auto-focus true 
       :value (:value @input) 
       :disabled (:disabled @input) 
       :on-change #(dispatch [:input-value-updated (.-target.value %)]) 
       :on-key-press #(when (= 13 (.-which %)) 
            (if (= (.-target.value %) (:solution @current-char)) 
            (dispatch [:right-option-picked]) 
            (dispatch [:wrong-option-picked])))}])])) 

(defn quiz [props childrn this] 
    (let [current-char (subscribe [:current-char]) 
     counter (subscribe [:counter]) 
     feedback (subscribe [:feedback])] 
    (fn [] 
     [:div.panel-container 
     [:h2 "Quiz"] 
     [:div.counter (str (:correct-guesses @counter) "/" (:total-guesses @counter))] 
     [:div.char (:hint @current-char)] 
     [solution-input] 
     [:div.feedback (when (not= @feedback "off") @feedback)] 
     [:button {:type "button" 
       :on-click #(dispatch [:next-char])} 
       "Skip"] 
     [:button {:type "button" 
       :on-click #(dispatch [:panel-changed "result"])} 
       "Finish"]]))) 

通知我也是用重製幀。我將輸入狀態（它的值和禁用狀態）保存在我的app-db中，並在我的組件中訂閱它們。因此，一旦這些道具中的任何一個發生變化（這是我的焦點包裝的目的），就很容易將重點放在組件上。

儘管如此，我一直在努力尋找一種方法，一旦單擊跳過按鈕時強制輸入焦點。據我所知，this is a typical justified用於React的ref，這在Reagent中似乎有不同的作用。

有人可以推薦一種方法來解決這個特定的重點管理問題在試劑/重新框架？

Answer 1

我認爲使用效果是有序的。

(reframe/reg-event-fx 
    :next-char 
    (fn [cofx [_ a]] 
     (.focus (.getElementById js/document "text-field-id")) 
     {})) 


    ... 
    [:button {:type "button" 
      :on-click #(dispatch [:next-char])} 
      "Skip"]