Reactフックを使用してチェックボックスグループ内の複数のチェックボックスをオフにする
P粉008829791
2023-08-30 13:23:32
<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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
これが私がそれを行った方法です: 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コンポーネントを扱う場合、単一のブール値を使用して すべての チェックボックスを制御することはできません 、レンダリングされる各チェックボックス にブール値を設定する必要があります。そこで、selected 配列を作成し、各 <input /> のchecked値をselected.includes(item) に設定します。(ブール値を返します)。onChangeイベントで配列の値を更新する必要があります。
itemが以前のバージョンのselectedに含まれているかどうかを確認します。存在する場合はフィルターで除外します。存在しない場合は追加します:リーリーこれでいくつかの問題が解決されることを願っています。グループごとに特定の handleOnChange 関数を作成する必要があります。ジャンル チェックボックス グループに対して同様の関数を作成しました。同じ方法で他のグループに対しても作成できます。
これは処理関数です。
リーリー以下に示すように、この関数を handleOnChange 属性として CustomCheckboxGroup に渡します。
リーリーテストのために、handleOnChange 関数をコメントアウトします。
サンドボックス内の完全な実用的なソリューションを参照してください - 完全なコード