【React】チェックボックスの状態を管理する

Reactでチェックボックスの状態を管理したい！

<input
    type="checkbox"
    {isChecked ? "checked" : ""}
/>

こんな感じでやろうとしたけども、こうではないらしい。

概要

今回の記事では、Reactでチェックボックスの状態を管理する手順を掲載する。

仕様書

環境

• react 18.2.0

手順書

ボタンを押すとチェックボックスの状態が切り替わるサンプル。

import React, { useState } from 'react';

const Checkbox = () => {
    const [isChecked, setIsChecked] = useState(false);

  const handleChange = () => {
    setIsChecked(!isChecked);
  };

  return (
    <div>
      <input
        type="checkbox"
        checked={isChecked}
      />
      <input
        type="button"
        onClick={handleChange}
      />
    </div>
  );
};

export default Checkbox;

checked={isChecked}みたいな感じにcheckedへ真偽値を代入する的な！

まとめ（感想文）

こんなサンプルだと実用性がないんだけども、チェックボックスやラジオボックスの初期状態をAPIなどで読み込んだデータを基に設定する場合に使えるかもね！