たまに見るuncontrolled input関連の警告についての小ネタです。 知っていると原因がすぐわかるのですが、知らないと結構デバックに時間が掛かる面倒な警告です。 まず、React の Form 関連コンポーネントの考え方にはcontrolledとuncontrolledの 2 つがあります。 簡単に両者の違いを説明すると、値が React の state で管理されているかどうかです。 controlledの方は、値が React の state で管理されていて、setStateしないと変更できません。 それに対してuncontrolledは、値が React の state で管理されていないので、従来の方法で値を変更できるのですが、lifecycle イベントなどの React の様々な恩恵を受けにくくなります。 で、本題ですが。 React でフォームがある画面を開発して
![I am mitsuruog | Reactのuncontrolled input warningで困った時に確認するべきたった1つのこと](https://cdn-ak-scissors.b.st-hatena.com/image/square/93aa5549cc7f7dcc0b5d0b6ad92a21e46848b81a/height=288;version=1;width=512/https%3A%2F%2Fs3-ap-northeast-1.amazonaws.com%2Fblog-mitsuruog%2Fimages%2F2017%2Freact-uncontrolled-input.png)