Reactフックを使用してチェックボックスグループ内の複数のチェックボックスをオフにする

Question

<p>いくつかのチェックボックス グループでいくつかのチェックボックスを実行しました。特定のチェックボックスのチェックを外す（それによって状態を変更する）方法がわかりません。何らかの理由で、<code>e.target.checked</code> にアクセスできません。 </p> <pre class="brush:php;toolbar:false;"><チェックボックス サイズ="小" 名前={アイテム} 値={アイテム} Checked={checkboxvalues.includes(item)} onChange={(e) => handleOnChange(e)} /> <p>そして私の機能</p> <pre class="brush:php;toolbar:false;">const handleOnChange = (e) => { const check = e.target.checked; setChecked(!check); };</pre> <p>このサンドボックスでコンポーネントの動作例を作成しました。 </p>

Answer 1

これが私がそれを行った方法です: https://codesandbox.io/s/elastic-pateu-flwqvp?file=/components/Selectors.js

選択ロジックを useSelection() カスタム フックに抽象化しました。つまり、現在の選択内容は store[key].selected にあります。ここで、 key には、selector の任意のキーを指定できます。

items、selected、setSelected、および sectionLabel は、# の各 useSelection() 呼び出しに保存されます。 ##store[key] を取得し、<CustomCheckboxGroup /> コンポーネントに渡します。

関連する部分は、このコンポーネント内の

handleCheck 関数です。この関数は、以前に選択した値に基づいて新しい選択を設定します。現在の item が以前の に含まれている場合selected 値を削除します。それ以外の場合は追加します。

---

さらに詳しい説明(理由)

コードをよく見ると、React でチェックボックス コンポーネントがどのように機能するか混乱しているようです。

input の checked 属性は、boolean 状態によって制御されます。一般的な例: リーリー

各レンダリングで、

<input /> の checked 値は、checked 状態の現在の値に基づいて設定されます。入力された checked が (ユーザー操作中に) 変更された場合、ステータスは自動的に更新されません。ただし、onChange イベントが発生し、それを使用して状態を状態の以前の値の負の値に更新します。

---

<CheckboxList /> コンポーネントを扱う場合、 単一のブール値を使用して すべての チェックボックスを制御することはできません 、レンダリングされる各チェックボックス にブール値を設定する必要があります。そこで、selected 配列を作成し、各 <input /> の checked 値を selected.includes(item) に設定します。 (ブール値を返します)。 これを機能させるには、すべての onChange イベントで

selected

配列の値を更新する必要があります。 item が以前のバージョンの selected に含まれているかどうかを確認します。存在する場合はフィルターで除外します。存在しない場合は追加します: リーリー これでいくつかの問題が解決されることを願っています。

Answer 2

グループごとに特定の handleOnChange 関数を作成する必要があります。ジャンル チェックボックス グループに対して同様の関数を作成しました。同じ方法で他のグループに対しても作成できます。

これは処理関数です。

リーリー

以下に示すように、この関数を handleOnChange 属性として CustomCheckboxGroup に渡します。

リーリー

テストのために、handleOnChange 関数をコメントアウトします。

サンドボックス内の完全な実用的なソリューションを参照してください - 完全なコード