【React】inputタグとcheckbox(チェックボックス)

inputタグとcheckbox(チェックボックス)の挙動がただのHTMLのwebサイトとReactで違う。

htmlの場合は、checked=trueやchecked=falseを指定しても、どちらの場合もチェックボックスはチェックされる。

しかし、Reactの場合はchecked={true}やchecked={false}でチェック入れたり外したりの制御が可能である。
この挙動の違いは重要である。

不明点
ReactにおいてinputタグではreadOnlyがないと警告が出るという情報が次の動画にあった。33分19秒のところから説明あり。しかし、私の環境だとinputタグではreadOnlyがなくても警告がでない。
何故だろうか？Reactにおいて、inputタグでreadOnlyは調査中。
何か警告が出たり出なかったりする条件があるのだろうか？分かったら追記することにする。
Reactのstrictモードが関係しているかもしれない。これを今度試すことにする。

追記2024年3月26日(火)に追記
どうやら、inputタグにonChangeがない場合はreadOnlyがないと警告が出ることが判明。
Reactのstrictモードが関係ない。
onChangeがあるときにreadOnlyが指定しても指定しなくても警告もエラーでない。
ここまでは分かった。

しかし、readOnlyの使いどころとかはイマイチ分からない。webサイトをあんまり作ってなかったからだな。

<input type="checkbox" checked={false} />
<input type="checkbox" checked={true} />
<input type="checkbox" readOnly />
<input type="checkbox" readOnly onChange={handleTodoClick} />
<input type="checkbox" onChange={handleTodoClick} />

次にコードでのエラーについて書いていく。

<div>
<input
  type="checkbox"
  checked={true}
/>
test
</div>

firfoxでは次のように警告になる。

Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`.
input
div
header
div
App@http://localhost:3000/static/js/bundle.js:78:80

–日本語や訳は次の通り ここから–
警告 onChange ハンドラを持たないフォームフィールドに checked プロパティを指定しました。これは読み取り専用フィールドをレンダリングします。フィールドが変更可能な場合は defaultChecked を使用してください。そうでない場合は、onChange または readOnly を設定してください。
入力
div
ヘッダ
div
App@http://localhost:3000/static/js/bundle.js:78:80
–日本語や訳は次の通り ここまで–

chromeでは次のように警告にになる。
デベロッパーツールでwarningなのに、なんで1 errorなんだ？矛盾していない？

react-dom.development.js:86 Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`.
    at input
    at div
    at header
    at div
    at App (http://localhost:3000/static/js/bundle.js:78:80)

–日本語や訳は次の通り ここから–
react-dom.development.js:86 Warning： onChange ハンドラを指定せずに checked プロパティをフォームフィールドに指定しました。これは読み取り専用のフィールドをレンダリングします。フィールドが変更可能な場合は defaultChecked を使用してください。そうでない場合は、onChange または readOnly を設定してください。
at input
div で
ヘッダー
at div
at アプリ (http://localhost:3000/static/js/bundle.js:78:80)
–日本語や訳は次の通り ここまで–

つまりさ、次のようにcheckedにtrueやfalseでなく変数aaaが設定してあったとしてもチェックしても外してもなんの関数の動かないってことになる。理由はonChangeハンドラが存在しないから。
この理由で、onChangeハンドラかreadonlyを設定せよということになる。

<div>
<input
  type="checkbox"
  checked={aaa}
/>
test
</div>

• 
• Tweet

• React