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频道。在那里进行持续对话要容易得多。