ReactのStateless Functional Componentsでrefの代わりにonChangeでstateを使いましょう的なお話

ReactでStateless Functional Componentsを使うと気持ち綺麗にかけるよねという感じ。
特にお問い合わせフォームでメールを送信したあとで画面を切り替えるときに、
jsx内で{}を使って条件分けするにも長いと見づらくなるわけで。
なのでStateless Functional Componentsを使うことによって綺麗にしましょうと。
ただその場合はrefが使えないのでじゃあどうしようという。

ということでrefの代わりにstateとonChangeを使うことで代替できるよ的なお話。

こんな感じ。
とりあえずOnChangeFieldというfunctionをContactFormに渡す。
で、これをonChangeイベントに入れてあげると、親であるContact内で処理がされるのでContactのstateに値を渡せるという。
で、buttonをクリックしたときにstateがnullになっているかなっていないかを判断してメールを送信するためのactionを発火させるという。

ちなみにisFetchingは送信中にローディングを表示するためであり、
componentWillUpdateで送信が完了したのを検知して、stateを変更するという形で状態が遷移する。

自分が書くcomponentはこんな感じで、これ以上粒度を下げると自分的に管理もしづらいし、
それにpropsの伝搬しまくるみたいなことが起きてしまうと面倒だよね的なみたいな。