试剂:组分贴装

Question

我试图把最初的焦点放在一个输入元素上

(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"}]]))

不过，这对我不管用。我做错了什么？

Answer 1

正如sbensu所说，with-meta似乎只在试剂中起作用。这意味着它可以与identity一起使用来产生一个可重用的包装器。

(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

我认为with-meta应该把一个函数作为一个参数。从医生那里：

(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))))}))

所以你的代码应该是：

(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"}]]))

Answer 3

在给定组件上设置焦点的另一种方法是使用“：auto true”属性：

(defn chat-input []
  [:input {:type "text" :auto-focus true}]])