Фокус и размытие компонента после воздействия на другой компонент в реагенте

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 и подписываюсь на них в моем компоненте. Поэтому легко изменить фокус на компоненте, как только любой из этих реквизитов изменится (для этого и предназначен мой упаковщик фокуса).

Тем не менее, я изо всех сил пытаюсь найти способ заставить фокусировку на вводе после нажатия кнопки пропуска. Насколько мне известно, это типичный обоснованный вариант использования ref в React, которые, кажется, работают по-другому в 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"]