ClojuresScript 不通过单击应用类值

Question

我有以下过度设计的代码，在页面上显示 2 个按钮，但是当我单击按钮时没有任何反应。

我使用试剂 (r) 和 mui (m)。

(defn settings [id]
  (let [active "active-content-button"
        inactive "content-button"
        classes (r/atom {1 inactive, 2 inactive})]

    (defn toggle-active [button-id]
      (swap! classes assoc 1 inactive)
      (swap! classes assoc 2 inactive)
      (swap! classes assoc button-id active))

    [:div {:style {:padding (* 2 SPACING)}}
     [:div {:class "tab-block"}
      [m/Button {:class (@classes 1) :on-click #(toggle-active 1)} "Filters"]
      [m/Button {:class (@classes 2) :on-click #(toggle-active 2)} "Settings"]]]))

我期望按钮的类在单击时自行更新。我错过了什么？

Answer 1

几件事：

• 不要嵌套

  defn

  和/或

  def

  。相反，请使用

  let

  /

  letfn

  /

  fn

  或将

  defn

  移到外面
• 不要对同一个原子使用多个

  swap!

  /

  reset!

  操作。相反，将它们合并为一个
• 您需要使用所谓的 form-2 组件 或

  r/with-let

  。如果没有这些，您的

  r/atom

  就会在

  settings

  组件的每次渲染上重新创建

一些不太重要的事情：

• 类名可以是 Reagent 中的关键字，如果您愿意的话
• 互斥选项最好使用关键字而不是数字来处理，即我会将您的数据重新建模为

  active-button (r/atom :filters)

  ，然后根据该条件有条件地选择类

Answer 2

之前答案中的建议看起来像这样：

(defn class [active?]
  (if active? "active-content-button" "content-button"))

(defn settings [id]
  (let [active (r/atom :filters)]
    (fn []
      [:div {:style {:padding (* 2 SPACING)}}
       [:div.tab-block
        [m/Button {:class (class (= @active :filters))
                   :on-click #(reset! active :filters)}
         "Filters"]
        [m/Button {:class (class (= @active :settings))
                   :on-click #(reset! active :settings)}
         "Settings"]]])))