clojurescript - 如何在 Reagent(Clojurescript) 中将焦点从一个元素传递到另一个元素？

Question

我正在尝试使用reagent编写可重复使用的标签控件。我需要做的是在用户单击祖先 div 元素后聚焦输入字段。更清楚地说，我想在用户单击带有类表单元素的div 后，将焦点放在带有类标签输入的输入上 我该如何实现呢？

[:div.form-element
  [:div.some-other-class
    [:ul
      [:li "entered-tag"]
    ]
  ]
  [:input.tag-input {:type "text"}]
]

Answer 1

我猜你必须实现一些老式的点击处理：

[:div.form-element
  {:on-click #(do (println :click-click)
                  (.focus (.getElementById js/document "my-input")))}
  [:div.some-other-class
    [:ul [:li "entered-tag"]]]
    [:input.tag-input {:type "text" :id "my-input"}]]

所以你可能应该为这个表单元素的东西创建一些工厂函数：

(defn form-element [id]
  [:div.form-element
    {:on-click #(.focus (.getElementById js/document id))}
    [:div.some-other-class
      [:ul [:li "entered-tag"]]]
      [:input.tag-input {:type "text" :id id}]])

并像这样使用它：

[:div
  (form-element "form-element-1")
  (form-element "form-element-2")]

对我来说很好