Reagent 中受控的 React 组件

Question

我想创建一个复选框组，其中一个复选框旨在控制其他复选框。那个特殊的将用作 "select all"。

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

(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"}))]])

乍一看它有效 - 当您首先检查（特殊的）时它也会检查其他人，如果您先取消选中它会取消选中其他人，如果您手动检查所有其他人，特殊的也会检查.

那么，问题是什么？

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

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

我关注了 link 并找到了关于 Reacts 受控和非受控组件的故事。我不是 React 鉴赏家，我不清楚如何仅通过操作 value 属性 of input 来选中复选框（如果我理解给出的建议 here） .

我绝对想让复选框既可用于手动更改又可由 example-data 的状态控制。

需要来自最有经验的 React/Reagent 用户的一些说明或示例，我一点经验都没有，欢迎大家提出意见。

Answer 1

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

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

Reagent 中受控的 React 组件

Controlled React components in Reagent

clojurescript

reactjs

reagent

那么，问题是什么？