Question

我试图了解如何从om.next的文本框中读取状态。据我了解，我们不再受限/应该使用core.async。

作为一个小例子，考虑在文本框中书写并将其绑定到段落元素，以便您输入的文本自动显示在屏幕上。

(def app-state (atom {:input-text "starting text"}))


 (defn read-fn
   [{:keys [state] :as env} key params]
   (let [st @state]
     (if-let [[_ v] (find st key)]
       {:value v}
       {:value :not-found})))

 (defn mutate-fn
   [{:keys [state] :as env} key {:keys [mytext]}]
   (if (= 'update-text key)
     {:value {:keys [:input-text]}
      :action
      (fn []
        (swap! state assoc :input-text mytext))}
     {:value :not-found}))

(defui RootView
   static om/IQuery
   (query [_]
          [:input-text])
   Object
   (render [_]
           (let [{:keys [input-text]} (om/props _)]
             (dom/div nil
                      (dom/input
                       #js {:id "mybox"
                            :type "text"
                            :value input-text
                            :onChange #(om/transact! _ '[(update-text {:mytext (.-value (gdom/getElement "mybox"))})])
                            })
                      (dom/p nil input-text)))))

这不起作用。

在input表单中触发onChange事件时，引用的表达式不会从框中抓取文本。



第一个突变会触发并更新，但随后的突变不会被触发。即使状态没有改变，查询是否应该从app-state读取字符串并强制文本相同？

Answer 1

我会让:onChange事件看起来像这样：

:onChange (fn (_)
            (let [v (.-value (gdom/getElement "mybox"))]
              #(om/transact! this `[(update-text {:mytext ~v})])))

这里的值v实际上会经历。但是om/transact!还需要将组件或协调程序作为其第一个参数传递。在这里，我传递this这将是根组件。

用Om读取输入

1 个答案: