试剂中受控的 React 组件答案

【问题标题】：Controlled React components in Reagent试剂中受控的 React 组件
【发布时间】：2016-07-07 16:06:27
【问题描述】：

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

这是我的想法（部分可行）：

(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

我通过链接找到了有关 React 受控和不受控组件的故事。我不是 React 鉴赏家，我不清楚如何仅通过操作 input 的 value 属性来检查复选框（如果我理解 here 给出的建议）。

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

需要大多数有经验的 React/Reagent 用户的说明或示例，我完全没有经验，欢迎所有 cmets。

【问题讨论】：

只做:checked (this-is-checked? :all)等
@ClojureMostly 嗯...看来它解决了问题。我觉得很奇怪。 {:type "checkbox" :on-change #(check-this 1)} 和 {:type "checkbox" :on-change #(check-this 1) :checked false} 在 React/Reagent 方面有什么区别？你能把它写成答案让我接受吗？

标签： reactjs clojurescript reagent

【解决方案1】：

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

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

【讨论】：