ホームページ  >  に質問  >  本文

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

<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>
P粉008829791P粉008829791438日前451

全員に返信(2)返信します

  • P粉322319601

    P粉3223196012023-08-31 09:00:43

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

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

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

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

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


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

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

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

    各レンダリングで、

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


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

    selected

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

    返事
    0
  • P粉060528326

    P粉0605283262023-08-31 00:36:19

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

    これは処理関数です。

    リーリー

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

    リーリー

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

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

    返事
    0
  • キャンセル返事