Reactでフォームを実装するのはちょっと癖があります。

まずReactのフォームにはcontrolled formとuncontrolled formという２つのパターンがあることを先に理解しておくと良いかもしれません。参考：React ドキュメント

私はまだ理解が及んでいないところも多々ありますが、Reactの実装例が少ないので少しでも刺激になればという感じで記事を公開したいと思います。（もっと楽なやり方とかこうした方がいいといった指摘があると幸いです。）

今回の実装にあたり色々ググったのですが、inputが一つしかない実装例ばかりで結構しんどかったです。。。

やること

やらないこと

複数のinputを扱う実装例はbindを使用したものがほとんどだと思います。ドキュメントに載っている実装例や検索するとでてくる大抵の実装例にはbindを使用したケースが多かったです。

しかし、このbindが今ひとつ理解できない・・・。

ネストしていないシンプルなオブジェクトのstateを用意した例は多々あったのですが、ネストしたオブジェクトを利用した場合、どうすればいいのかよくわかりませんでした（泣）

そこで調べまくって見つけたのがこの記事でした。 Stack Overflow - Best practice for ReactJS form components

というわけで上記を参考にしつつ実装します。

htmlはこんな感じです。

そしてReactはこんな感じです。

冒頭で面倒だと言いましたが、案外シンプルな気がしてきました。笑特筆すべき点は、、、特になさそうですね。

動作はこんな感じです。

Reactの記事を色々調べていて思ったのですが、Reactの触りしかない記事ともうほんとに前線でReactやってみますみたいな記事の二極化が結構進んでいるように感じました。

Javascriptの前提知識が不足気味な私には生意気な物言いですが、もう少し過程にフォーカスした記事があるといいなーと思いました。

同じReactでも人によってはESなんちゃらだったりstrictモードだったり、ビルド環境が違ってたり、、フロントエンドのぬかるみにはまっている自分には何が何やらです(_)

毎度Reactネタは悲壮感漂っている気がしますが、Reactをかくのは楽しいです。(｀･ω･´)ゞ