我想为Om组件创建一个单击处理程序函数。我发现的docs和Stack Overflow示例总是声明这样的匿名函数
(defn main-view [_ owner]
(reify
om/IRender
(render [_]
(let [xs (items)]
(dom/div nil
(om/build sub-view {:title "View A"})
(om/build sub-view {:title "View B"})
(dom/button
#js {:onClick
(fn [e] (om/transact! xs #(assoc % 1 {:text "zebra"})))}
"Switch To Zebra!"))))))
我认为在组件内部的jsx / template区域之外声明单击函数会更干净，这是常规React中通常会执行的方式。有没有办法在组件内的Om中执行此操作？我试过了，但是因为onClick是未定义的，所以它不起作用：
(defn my-component []
(reify
om/IRender
(render [this]
; Using Sablono syntax
(html [:h1 "Here is a heading" {:on-click 'onClick} ]))
onClick
(onClick [this]
; this part never gets executed when you click
(.log js/console "click"))))
如果可能的话，我想避免在组件外部定义一个单独的函数。
您的问题很明智，与处理数据范围有关。
可能但这种方法存在问题，在大多数情况下，您将需要来自外部代码块的本地范围数据（在您的情况下，这是一个Om组件）。
我会用代码解释。假设您要移出处理函数：
(anything
(let [a 1 b 2]
(on-event (fn my-handler [evt] (log (+ a b (.someAttr evt)))))))
您最终会得到更长的结果：
(defn local-data->handler [a b]
(fn [evt] (log (+ a b (.someAttr evt)))))
(anything
(let [a 1 b 2]
(on-event (local-data->handler a b))))
如果您只想在组件定义内移动：
(anything
(let [a 1
b 2
my-handler (fn [evt] (log (+ a b (.someAttr evt))))]
(on-event my-handler)))
请注意：为了使事件处理程序正常工作，请确保您的非匿名函数（使用defn或let创建）与匿名形式（尤其是参数列表）相同。
onClick是未定义的，因为您像使用Om协议一样使用它。请参考Om生命周期协议以正确使用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句