1

チェックボックスの1つが他のチェックボックスを制御することを目的としたチェックボックスグループを作成したい。その特別なものは「すべて選択」として使用されます。

これが私の考えです（部分的に機能しています）：

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

そして、それは一目で機能します-最初にチェックすると（特別なもの）、他のものもチェックされます。最初にチェックを外すと、他のチェックを外し、他のすべてを手動でチェックすると、特別なものもチェックされます。

それで、問題は何ですか？

チェックボックスの 1 つを初めてチェックすると、警告に続いて試薬が起動します。

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プロパティのみをチェックする方法が明確ではありません（ここでinput与えられた提案を理解した場合）。

チェックボックスを手動で変更できるようにし、状態によって制御できるようにしたいのは間違いありませんexample-data。

経験豊富な React/Reagent ユーザーからのいくつかの説明または例が必要です。私はまったく経験がなく、すべてのコメントを歓迎します。

4

1 に答える 1

1

反応ドキュメントで説明されているように、制御された入力から制御されていない入力に変更することはできません。特定のケースでこれを修正するには、常にボックスの状態を設定する必要があります。

[:input {:type "checkbox" 
         :on-change #(check-all %)
         :checked (this-is-checked? :all)}]
于 2016-07-07T08:06:27.987 に答える