【React】チェックボックスにチェックされたときだけ送信ボタンを有効化(関数コンポーネント)

プライバシーポリシーに同意するにチェックがあったときだけ、問い合わせを送信できるようにした時に。
required属性つけるだけでも実装できるけど、HTMLのフォームエラーのデザインが気に入らない時などに。

概要

• isCheckedというstate(boolean)を作成
• 送信ボタンのdisabled属性にisCheckedをセット
• isCheckedの値を変化させる関数(toggleCheckbox)を作成
• toggleCheckboxをチェックボックスの状態が変化した時に発火

コード

import React, { useState } from "react"

export default () => {
  const [isChecked, setIsChecked] = useState(false)
  const toggleCheckbox = () => {
    setIsChecked(!isChecked)
  }
  return (
    <>
      <h2>お問い合わせ</h2>
      <form method="post" action="#">
        <label htmlFor="email">メールアドレス</label>
        <input type="text" name="email" id="contact_email" />
        <label htmlFor="content">お問い合わせ内容</label>
        <textarea name="content" id="contact_content" cols="30" rows="10"
        ></textarea>
        <p>利用規約に同意します。</p>
        <input type="checkbox" name="agree" id="agreeCheck" onChange={() => toggleCheckbox()}
        />
        <label htmlFor="agreeCheck">同意する</label>
        <div>
          <button type="submit" disabled={!isChecked}>送信</button>
        </div>
      </form>
    </>
  )
}