MUI Select - 添加取消选择功能

Question

(defn- menu-item
  [value-fn label-fn state lang index item]
(let [value (value-fn item)
    label (label-fn item lang)]
^{:key index}
[:> m/MenuItem {:value   value
                :data-cy (-> (str value) (str/lower-case) (str/replace " " "-") (str "-menu-item"))}
 [:> m/Checkbox {:checked (= (value-fn state) value)}]
 [:> m/Typography {} label]
 ]))

(defn select
  [{:keys [data state-fn disabled? label value-fn label-fn data-cy variant]}]
  (let [rf-lang   (rf/subscribe [:current-language])
        label-fn1 (or label-fn (fn [item lang] (value-fn item)))]
    (fn [{:keys [data state-fn disabled? label value-fn data-cy variant]}]
      (let [lang  @rf-lang
            state (state-fn)
            props (cond->
                    {:select      true
                     :full-width  true
                     :SelectProps {:MenuProps    {:getContentAnchorEl nil}
                                   :render-value (fn [items]
                                               (if label-fn
                                                 (label-fn state lang)
                                                 (map identity items)))
                               :data-cy      data-cy}
                 :value       (or (value-fn state) "")
                 :on-change   (fn [e]
                                (let [selected (.. e -target -value)]
                                  (state-fn (first (filter #(= selected (value-fn %)) data)))))
                 :label       (i18n/translation label lang)
                 :disabled    disabled?}
                variant (assoc :variant variant))]
    [:> m/TextField props (map-indexed (partial menu-item value-fn label-fn1 state lang) data)]))))

我有一段代码用于创建带有旁边复选框的项的下拉列表。问题是复选框不能被移除。当用户点击一个已经选中的复选框时，没有任何动态出现。在这种情况下，它应该变为取消选择状态。

Answer 1

不确定是否完全正确，但似乎您通过传递:checked，已经使复选框组件受控 - 它将不会对除了该值改变之外的任何东西做出反应，您需要通过提供一个:on-change函数并更改底层值来自己做到这一点。

另外请注意，您不应该使用顺序索引作为React键。要么根本不使用键，通过避免懒集合来实现，要么找出组件的自然键。

最后一点，我认为在Clojurians Slack上提出此类具体支持问题更好，我们在那里有多个频道。对于这个案例，有#reagent。在那里进行持续的对话要容易得多。