複数選択可能な状態保持チェックボックスを作成する | React チュートリアル

はじめに

この実験では、React を使って複数選択可能な状態保持チェックボックスを作成する方法を学びます。この実験では、チェックボックスリストをレンダリングし、その状態を更新し、コールバック関数を使って選択された値を親コンポーネントに渡すプロセスを案内します。この実験が終わると、任意の React プロジェクトで使える再利用可能なチェックボックスコンポーネントを作成できるようになります。

複数選択可能な状態保持チェックボックス

VM 内には既にindex.htmlとscript.jsが用意されています。一般的には、script.jsとstyle.cssにのみコードを追加すればよいです。

このコードは、チェックボックスのリストをレンダリングし、コールバック関数を使って選択された値を親コンポーネントに送信します。作成手順は以下の通りです。

useState()フックを使って、optionsプロップでdata状態変数を初期化します。
選択されたオプションでdata状態変数を更新し、それらを使ってonChangeコールバック関数を呼び出すtoggle関数を作成します。
個々のチェックボックスとそのラベルを生成するためにdata状態変数をマッピングします。各チェックボックスのonClickハンドラにtoggle関数をバインドします。

const MultiselectCheckbox = ({ options, onChange }) => {
  const [data, setData] = React.useState(options);

  const toggle = (index) => {
    const newData = [...data];
    newData[index] = {
      ...newData[index],
      checked: !newData[index].checked
    };
    setData(newData);
    onChange(newData.filter((item) => item.checked));
  };

  return (
    <>
      {data.map((item, index) => (
        <label key={item.label}>
          <input
            type="checkbox"
            checked={item.checked || false}
            onChange={() => toggle(index)}
          />
          {item.label}
        </label>
      ))}
    </>
  );
};

使用例は以下の通りです。

const options = [{ label: "Item One" }, { label: "Item Two" }];

ReactDOM.createRoot(document.getElementById("root")).render(
  <MultiselectCheckbox
    options={options}
    onChange={(selected) => {
      console.log(selected);
    }}
  />
);

右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080タブを更新してウェブページをプレビューできます。

まとめ

おめでとうございます！複数選択可能な状態保持チェックボックスの実験を完了しました。技術力を向上させるために、LabEx でさらに多くの実験を行って練習してください。