3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Controlled or Uncontrolled?

Posted at

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にするつもりがvalueundefinedを代入してしまうと、Uncontrolledとなってしまいます。イベントなどで値が変われば、「Controlledに切り替えようとした」とエラーとなってしまいます。

フォーム要素に与える値がundefinedとなることはないので、実用上は問題ないのですが、うっかりやらかさないように要注意です(文字列になる値であれば、value || ''などで対策しておいてもいいかもしれません。)。

外部リンク

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?