ReactのStateless Functional Componentsでrefを関数で定義して、親のcomponentに渡してrefとして扱ってバリデーションする的なお話

「ReactのStateless Functional Componentsでrefの代わりにonChangeでstateを使いましょう的なお話」を書いたけど、refを使うやり方を考えたので今日はそれの解説をば。
ちなみに前回と同じくお問い合わせフォームに関するものなので、そちらと見比べてもらえるとわかりやすいかと。
onChangeとかstateが減るのでこちらの方がみやすくていいんじゃないかと。

ざっくりと述べると、Contactに_formというstatic変数を用意してあげ、
ContactForm内でContact._formにrefを格納してあげるって感じ。
で、メールを送信するときにContact._form(つまりref)のvalueを見てバリデーションをかけるっていう。
もちろんref扱いになるので、そのままclassを付与したりとかもできるっていう。

前回述べたけど、Stateless Functional Componentsではrefが使えないんだけど、
それはStateless Functional Componentsにstringのrefを持たせようとするからであって、
ref={el => el?Contact._form[el.name] = el:false}のようにrefを関数にすることで問題ないという。
ちなみにrefのstringは公式でも非推奨という形になっているので要注意的な。

あとel?Contact._form[el.name] = el:falseとやっているけど、
componentがアンマウントするタイミング？でelがnullとなってしまうので、
nullチェックをしてContactの_form内に格納するようにしている。

で、static変数を用意してやっているんだけども、
多分setterとかgetterを用意してあげればそもそもstatic変数として扱う必要はないんじゃないかと思うけど、
たかだかこれのためだけにsetterとgetterを用意するのも面倒なのでstatic変数で処理しているっていう。

というか通常はbuttonにonClickイベントを付与するわけではなく、formのonSubmit時にバリデーションをかけるっていう。
なぜかonClickにしてしまっているけども。

ってな感じでこれでrefをちゃんと扱えるので、かなり便利にformのバリデーションができるんじゃないかと。
ちなみにバリデーション用のライブラリを使うとか、バリデーション用のクラスを作るとかしてあげるとより便利になるんじゃないか的なみたいな。