Reactでのチェックボックスの扱い方

チェックボックスの扱いも 同様の原則に従いますが、 value属性の代わりに checked属性を指定します。 この属性にtrueを渡せばチェックボックスはチェックされ、 falseを渡せばチェックされません：

jsxfunction App() {
  return <div>
    <input type="checkbox" checked={true}  /> チェック済み
    <input type="checkbox" checked={false} /> 未チェック
  </div>;
}

通常、checked属性には 論理値を持つステートが渡されます：

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} />
  </div>;
}

入力欄の扱いと同様に、 checked属性の値を 固定してしまうと、 チェックボックスの状態を変更できなくなります。 正しく動作させるには、 チェックボックスの変更時に そのステートを反転させます：

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  function handleChange() {
    setChecked(!checked); // ステートを反転
  }
  
  return <div>
    <input type="checkbox" checked={checked} onChange={handleChange} />
  </div>;
}

簡略化できます：

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
  </div>;
}

三項演算子を使って、 チェックボックスの状態を段落に表示してみましょう：

jsxfunction App() {
  const [checked, setChecked] = useState(true);
  
  return <div>
    <input type="checkbox" checked={checked} onChange={() => setChecked(!checked)} />
    <p>状態: {checked ? 'チェック済み' : '未チェック'}</p>
  </div>;
}