Question

我想制作复选框组，其中一个复选框旨在控制其他复选框。这个特殊的将被用作＆＃34;选择所有＆＃34;。

这是我的想法（部分有效）：

(defonce example-data (r/atom [{:id 1 :checked false} {:id 2 :checked false}]))

(defn check-all [e]
  (swap! example-data #(setval [s/ALL :checked] (-> e .-target .-checked) %)))

(defn check-this [id]
  (swap! example-data (fn [current]
                        (transform [s/ALL #(= (:id %) id) :checked] not current))))

(defn this-is-checked? [id]
  (case id
    :all (every? :checked @example-data)
    (first (select [s/ALL #(= (:id %) id) :checked] @example-data))))

(defn example []
  [:form
   [:input (merge {:type "checkbox" :on-change #(check-all %)}
                  (if (this-is-checked? :all) {:checked "true"}))]
   [:input (merge {:type "checkbox" :on-change #(check-this 1)}
                  (if (this-is-checked? 1) {:checked "true"}))]
   [:input (merge {:type "checkbox" :on-change #(check-this 2)}
                  (if (this-is-checked? 2) {:checked "true"}))]])

它一见钟情 - 当你第一次检查时（特别一个）它也会检查其他人，如果你先取消选中它取消选中其他人，如果你手工检查所有其他人，也会检查特别的一个。 / p>

那么，问题是什么呢？

第一次选中其中一个复选框时，试剂会在警告后触发。

react.inc.js:19500 Warning: ReagentInput is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://facebook.github.io/react/docs/forms.html#controlled-components

我已经按照链接找到了关于Reacts受控和不受控制的组件的故事。我不是React鉴赏家，我不清楚我怎样才能检查复选框只能操纵value的{{1}}属性（如果我理解给出的建议{{3} }）。

我绝对希望复选框既可用于手动更改，又可由input状态控制。

需要一些澄清或来自最有经验的React / Reagent用户的例子，我根本没有经验，欢迎所有评论。

Answer 1

如react docs中所述，您无法从受控输入更改为不受控制的输入。要在特定情况下解决此问题，您必须始终设置框的状态：

[:input {:type "checkbox" 
         :on-change #(check-all %)
         :checked (this-is-checked? :all)}]

Reagent中的受控React组件

那么，问题是什么呢？

1 个答案: