这是我的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的工作方式不同。
有人可以推荐一种方法来解决Reagent / re-frame中的这个特定焦点管理问题吗?
答案 0 :(得分: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"]