@m1527092 (やまだやまだ)posted at 2023-11-15

Reactで複数イベントを実行したい。

Q&A

Closed

Validation React 複数イベント

解決したいこと

ボタン押下時に複数のイベントを発生させたい。
①バリエーションチェック
②画面遷移

Reactで複数のイベントを１つの処理の中で行いたいのですが、うまくいきません。
つたない質問になり申し訳ございませんが、ご教示いただけますと幸いです。

発生している問題・エラー

今困っていること
①バリエーションチェックでひかかった場合に、
②画面遷移の処理をしてほしくないのに②画面遷移してしまいます。

実際の挙動
①で引っかかった際に、一瞬エラーメッセージが表示され画面遷移する。

該当するソースコード

const App: React.FC = () =>{
const [ inputText , setInputText ] = useState<string>("");
const [ errorMessage , setErrorMessage] = useState<string>("");
const maxLength = 100;

//①バリエーションチェック
const errorHandle = () =>{
if(inputText.length > maxLength) {
setErrorMessage("文字数は１００文字以下にしてください。");
return;
}
}

//①バリエーションチェックを呼び出し②画面遷移する。
const onSbumit = () =>{
errorHandle();
if(errorMessage === ""){
window.location.assign('/');
}
}

return{
<textarea value={inputText} onChange={(event) => setInputText(event.target.value)}></textarea>

<button onClick={() => {onSubmit()} }>ボタン</button>
}

}

1Answer

@Verclene posted at 2023-11-15

stateの更新は非同期のため,すぐにバリデーションの結果が欲しい時は直接関数から結果を返して工夫してください.

const errorHandle = () =>{
if(inputText.length > maxLength) {
-setErrorMessage("文字数は１００文字以下にしてください。");
-return;
+return "文字数は１００文字以下にしてください。"
}
}

const onSubmit = () =>{
-errorHandle();
+const err = errorHandle();
-if(errorMessage === ""){
+if(!err){
window.location.assign('/');
}
+else{
+  setErrorMessage(err);
+}
}

バリデーション機能を備えたフォームライブラリなどもあります.

3Like

Comments

@Verclene
ついでですがonChange時に毎回setStateを呼び出す行為は,場合によってはパフォーマンスの問題を引き起こすので,レンダリングにその情報が必要かどうか検討するようにしてください.
@m1527092
Questioner
ご回答ありがとうございます。
なぜ思い通りにいかないのかも含めクリアになりました！
補足事項もありがとうございます！！
処理を考えてより良い処理にできるよう検討します。
ありがとうございました！

Are you sure you want to delete the question?