列表项试剂clojurescript的单击处理程序

Question

我想为列表中的每个项添加一个点击处理程序.

(defonce selected-department (atom "department!"))

(defn sidebar []
  [:div#sidebar-wrapper
   [:ul.sidebar-nav
    [:li.sidebar-brand [:a {:href "#"} "Departments"]]

    ;;[:li [:a {:on-click (reset! selected-department "test!")} "Dairy"]]

    [:li [:a {:href "#"} "Dairy"]]
    [:li [:a {:href "#"} "Deli"]]
    [:li [:a {:href "#"} "Grocery"]]]])

然后,selected-department是我想要显示/使用数据的标签

(defn response-box []
  [:div#form_comparison
   [:label#dlabel @selected-department]])

注释掉的代码不起作用.有没有办法让这项工作？

Answer 1

您的示例无效,因为您必须将函数传递给:on-click,如下所示:

[:li [:a {:on-click #(reset! selected-department "test!")} "Dairy"]]

所以你唯一需要改变的是在#reset之前添加#!

它相当于

 [:li [:a {:on-click (fn [_] (reset! selected-department "test!"))} "Dairy"]]

编辑:

这是我测试的完整代码,对我来说很好用:

(defonce selected-department (atom "department!"))

(defn sidebar []
  [:div#sidebar-wrapper
   [:ul.sidebar-nav
    [:li.sidebar-brand [:a {:href "#"} "Departments"]]
    [:li [:a {:on-click #(reset! selected-department "Dairy") :href "#"} "Dairy"]]
    [:li [:a {:on-click #(reset! selected-department "Deli") :href "#"} "Deli"]]
    [:li [:a {:on-click #(reset! selected-department "Grocery") :href "#"} "Grocery"]]]
 [:label @selected-department]])

(reagent/render-component [sidebar] (.getElementById js/document "app"))

单击列表中的项目时,底部的标签会更新.