P粉3223196012023-08-31 09:00:43
これが私がそれを行った方法です: 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
イベントで
配列の値を更新する必要があります。 item
が以前のバージョンの selected
に含まれているかどうかを確認します。存在する場合はフィルターで除外します。存在しない場合は追加します:
リーリー
これでいくつかの問題が解決されることを願っています。
P粉0605283262023-08-31 00:36:19
グループごとに特定の handleOnChange 関数を作成する必要があります。ジャンル チェックボックス グループに対して同様の関数を作成しました。同じ方法で他のグループに対しても作成できます。
これは処理関数です。
リーリー以下に示すように、この関数を handleOnChange 属性として CustomCheckboxGroup に渡します。
リーリーテストのために、handleOnChange 関数をコメントアウトします。
サンドボックス内の完全な実用的なソリューションを参照してください - 完全なコード