Reactで描画する入力要素には、ControlledとUncontrolledという2種類のものがあります。そして、それぞれに動作が違いますが、意図せずに両者を切り替えようとする動作になってしまってトラブルとなったこともありました。
Controlled Element
Reactから<input>
などのvalue
に値を指定すると、それはControlled Elementということになります。以前書いたように、Controlled Elementは「入力操作があればイベントを発生させる」のと「value
として与えられた値を表示する」というだけの動作となり、入力時のイベントから対応する変数を書き換えるようなコードを書かない限り、値は変化しなくなります。
Uncontrolled Element
このような動作が適切でない場合、Uncontrolled Elementを使うこともできます。value
に何も指定しない場合、「入力値をReact側の値に固定させる」という動作はもちろん起きず、ふつうのフォーム要素と同様、要素内に値を記憶するスタイルとなります。Reactから初期値を指定したい場合、defaultValue
というpropを与えることで制御できます。
なお、<input type="file">
はJavaScriptから値を書き込むことができないので、Uncontrolled Elementとして使うしかありません。
うっかりUncontrolled
このように、Controlled ElementとUncontrolled Elementは性格の違うもので、両者を動的に切り替えようとするとエラーとなります。
切り替えを意図的にやることはないと思いますが、Controlledにするつもりがvalue
にundefined
を代入してしまうと、Uncontrolledとなってしまいます。イベントなどで値が変われば、「Controlledに切り替えようとした」とエラーとなってしまいます。
フォーム要素に与える値がundefined
となることはないので、実用上は問題ないのですが、うっかりやらかさないように要注意です(文字列になる値であれば、value || ''
などで対策しておいてもいいかもしれません。)。