Reagent的选框实现

多选框

(defonce selected-tags-store (atom []))
;; ...
[:select {:name "tag" :multiple "multiple"
             :value @selected-tags-store
             :on-change #(doseq [opt (array-seq (-> % .-target .-options))]
                           (if (.-selected opt)
                             (swap! selected-tags-store conj (.-value opt))
                             (swap! selected-tags-store disj (.-value opt))))}
    (doall
     (for [tag @tags-store]
       ^{:key tag}
       [:option tag]))]
;; ...

单选框

(defonce act-state (atom nil))

[:select {:name "tag"
                   :value (or @act-state "pending")
                   :on-change #(let [idx (.. % -target -selectedIndex)]
                                 (reset! act-state (-> (aget (.-target %) idx) .-value)))}
          [:option {:value "pending"} "规划中"]
          [:option {:value "online"} "推广中"]
          [:option {:value "offline"} "活动下线"]]
留言