clojurescript - 使用 Om Next 读取输入

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

这行不通。

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

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

Answer 1

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

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

在这里，价值v实际上将通过。但也om/transact!需要将组件或协调器作为其第一个参数传递。在这里，我将传入this哪个将是根组件。