React でチェックボックスの値を設定する

1. React での値制御入力のチェックボックス
2. React でチェックボックスの値を設定する

すべての Web アプリケーションには、ユーザーがテキストを入力したり、選択肢を選択したり、チェックボックスをオンにしたりできる入力要素が必要です。 この記事では、入力要素、特に React のチェックボックスを処理する方法について説明します。

React での値制御入力のチェックボックス

React で checked 値を持つ制御されたチェックボックスの実装について説明する前に、制御された入力について話しましょう。

React には、制御されたコンポーネントと制御されていないコンポーネントがあります。 入力は、これら 2つのタイプのいずれかになります。

コンポーネント (または入力要素) は、状態から値を取得するときに制御され、ユーザーのアクションによって状態が更新されます。

ユーザーが入力フィールドの値を変更すると、次のようになります。

1. state 値からフィールドの値を設定します。
2. フィールドに新しい文字を入力すると、onChange イベントがトリガーされます。
3. 状態を更新して変更を反映するようにハンドラーを設定します。
4. 入力フィールドに新しい状態値が表示されます。

つまり、入力要素と状態の間には双方向のバインディングがあります。 入力要素の変更により状態が更新され、要素は状態から値を取得します。

React でチェックボックスの値を設定する

通常、入力要素の value 属性を設定して、状態から値を取得できるようにします。 チェックボックスでは、checked 属性を使用します。

checked 属性をブール値に等しく設定できます。 したがって、状態値は、文字列、整数、またはその他の型ではなく、true または false である必要があります。

この例を見てみましょう:

export default function App() {
  const [condition, setCondition] = useState(true);
  return (
    <div className="App">
      Interested?
      <input
        type="checkbox"
        checked={condition}
        onChange={() => setCondition(!condition)}
      />
    </div>
  );
}

CodeSandbox のライブ デモをご覧ください。

この例では、チェックボックスの checked 属性を condition 状態変数に設定します。 useState() フックを使用して、この状態変数の値を初期化しました。

状態変数を初期化するとき、useState() に提供される引数は、状態変数の初期値になります。 この場合、condition 変数は true として初期化されます。

次に、ユーザーの最新の入力を反映するように状態を更新します。 そのために、onChange 属性を設定して、コンポーネントに変更があるたびに状態変数を更新します。

この場合、condition 状態変数を現在の値の逆に設定します。 現在 true の場合、チェックボックスを変更する (チェックを外す) と false に設定され、現在 false (チェックを外す) の場合は true に設定されます。