以前に以下の様な記事を書きました。
ReactのformをBootstrapからMaterial UIに移行する際の注意点
しかし書いた僕自身、またmaterial uiのformで色々躓いたので、その時に得た知識も含めて今回は、React+Material UIのformがうまく動作しない場合のチェックポイントを解説します。
※ここの項目をチェックすれば100%動く保証はできません。あくまで僕の経験則ですので、その辺はご了承を。
チェックリスト 📝
以下のチェックリストを用意しました。これを全て網羅する必要はありません。
どう言うことかというと(あとで詳しく説明しますが)、例えば、valueにstateを入れる場合もあれば、inputRefを使って〇〇Ref.current.valueで入力した値を読み取ることもあるからです。
- formタグで囲んでいるか
-
formタグの
onSubmitの処理を記述しているか -
refではなくinputRefを使っているか -
valueを使っているか -
submit用のbuttonを配置しているか(
type="submit"の記述はあるか)
以下で詳しく見ていきましょう
formタグで囲んでいるか
まずはformタグで囲んでいるかどうかです。Material UIにはBootstrapの<Form>の様なものはないので、普通のformタグを使います。
BootstrapからMaterial UIに移行した場合などは要チェックポイントです🙆♂️
formタグのonSubmitの処理を記述しているか
formタグで囲っていてもonSubmitにformの送信の処理を書いていないと何も起こりません😨
大体はhandleSubmitみたいな関数を用意して、その中で処理を書いていきます。onSubmit={handleSubmit}はよく使います。
上記のformタグで囲んでいるかと、このformタグのonSubmitの処理を記述しているかは必須です。
refではなくinputRefを使っているか
ここは僕が特にハマった部分で、この記事を書くきっかけになったところです。
Bootstrapや、普通のinputでrefを使う場合、ref={〇〇Ref}の様にinputやForm.Controlに書けばいいのですが、Material UIの場合は違います。
Material UIのTextFieldでrefを使う場合は、inputRefと言う特別な物を使わなければ動作しません。
ここは意外と引っかかる人もいるかと思います。refを使っているかたは要チェックポイントです‼️
valueを使っているか
TextFieldへの入力した値の取得をrefを使って行っていない場合は、value={}を使うかと思いますが、意外と書き忘れることが多いものかもしれません。
普通に入力値をstateで保持してsubmitしたり、onChangeメソッドにuseCallbackの関数を入れて、入力を検知しつつvalueにstateを入れてそのstateをsubmitするなどをします。
要するに、(inputRefを使っている場合を除いて)これがないと入力した値が送信できませんと言うことです。
submit用のbuttonを配置しているか(type="submit"の記述はあるか)
これはつまり、<button type="submit"></button>があるかどうかと言うことです。
当たり前ですが、ボタンを押しても、それがただのボタン(submitの記述がない)であればonSubmitが動きません。そうなると値を送信できません。
「UIや動作に問題はないけど、なぜか値だけ送れてない」と言う場合は、このtype="submit"があるかを確認してみてください。
最後に
いかがだったでしょうか？今回は、React+Material UIのformがうまく動作しない場合のチェックポイントを解説してきました。
書くチェックポイントを試すときは、console,log()で確認するといいと思います😃
もし、今回のチェックポイント以外にもチェックすべきところがあるよと言う場合はコメントにて教えてください🙇♂️