React onchageとHooksの挙動に関して

Question

##React onChange&Hookの挙動について

勉強の一貫でReactを使用したFormを作成しています。
inputタグにonChangeによって値を取得し、Hooksで値を保持する構成で記載しています。

しかし挙動がおかしく、下記問題を解決したいと考えています。

発生している問題・エラーメッセージ

inputタグで入力した値と、onChangeとHooksでの値保持で整合性が取れていない。
おそらくonChangeとHooksの挙動についての理解度不足だと思いますので、ご教授いただけると幸いです。

■問題ケース
[User]
・入力値 test01 (6文字入力)
→6文字入力するもエラー文が消えてくれない

[pass]
・入力値 testpass (8文字入力)
→6文字入力するもエラー文が消えてくれない

[passCheck]
・入力値 testpass (8文字入力)
→passと入力値が同じはずなのに、不一致エラーが発生。

該当のソースコード

import React, { useState } from "react";
import ReactDOM from "react-dom";

function Form() {
  let errorMessage = <p></p>;

  const [user, inputUser] = useState("");
  const [pass, inputPass] = useState("");
  const [PassCheck, inputPassCheck] = useState("");
  const str = /^[0-9a-zA-Z]*$/;

    const handleUserChange = (e: React.FocusEvent<HTMLInputElement>) => {
    inputUser(e.target.value);

    if (str.test(user) === false || user.length < 6 || user.length > 32) {
      errorMessage = <p>条件と合わないためエラー</p>;
    } else {
      errorMessage = <p></p>;
    }
    ReactDOM.render(errorMessage, document.getElementById("errorUserMessage"));
  };
    const handlePassChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    inputPass(e.target.value);

    if (str.test(pass) === false || pass.length < 7) {
      errorMessage = <p>条件と合わないためエラー</p>;
    } else {
      errorMessage = <p></p>;
    }
   ReactDOM.render(errorMessage, document.getElementById("errorPassMessage"));
  };
    const handlePassCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
    inputPassCheck(e.target.value);

    if (!(PassCheck === pass)) {
      errorMessage = <p>不一致エラー</p>;
   　} else {
      errorMessage = <p></p>;
    }
   ReactDOM.render(errorMessage, document.getElementById("errorPassCheck"));
  };
  

  return (
    <form action="" id="form">
      <input type="text" value={user} onChange={handleUserChange} />
      <p id="errorUserMessage"></p>
      <input type="text" onChange={handlePassChange} />
      <p id="errorPassMessage"></p>
     <input type="text" onChange={handlePassCheck} />
      <p id="errorPassCheck"></p>
    </form>
  );
}

export default Form;

試したこと

関数コンポーネントとHooksによる値管理を実施。
しかし、挙動が意図しないためクラスコンポーネントに変更するもうまくいかず。

お手数かけますが、ご教授いただけると幸いです。
よろしくお願いいたします。

Comments

[maisumakun]

えっと、export defaultしているはずのFormの定義はどこでしょうか？

[front]

失礼いたしました。
修正対応いたしましたので、ご確認お願いいたします

Answer 1

  let errorMessage = <p></p>;

のような管理をして再代入を行うとReact は挙動が保証されません。
あと@maisumakun さんがおっしゃってるように今回のような場合は ReactDOM.render は使いません。

import React, { useState } from "react";

function Form() {

  const [user, inputUser] = useState("");
  const [pass, inputPass] = useState("");
  const [PassCheck, inputPassCheck] = useState("");

  const [errorUserMessage, setErrorUserMessage] = useState<string>('')
  const [errorPassMessage, setErrorPassMessage] = useState<string>('')
  const [errorPassCheck, setErrorPassCheck] = useState<string>('')
  const str = /^[0-9a-zA-Z]*$/;

  const handleUserChange = (e: React.FocusEvent<HTMLInputElement>) => {
    inputUser(e.target.value);

    if (str.test(user) === false || user.length < 6 || user.length > 32) {
      errorUserMessage("条件と合わないためエラー")
    } else {
      setErrorUserMessage("")
    }
  };
  const handlePassChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    inputPass(e.target.value);

    if (str.test(pass) === false || pass.length < 7) {
      errorPassMessage("条件と合わないためエラー")
    } else {
      setErrorPassMessage("")
    }
  };
  const handlePassCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
    inputPassCheck(e.target.value);

    if (!(PassCheck === pass)) {
      errorPassCheck("不一致エラー")
    } else {
      setErrorPassCheck("")
    }
  };

  return (
    <form action="" id="form">
      <input type="text" value={user} onChange={handleUserChange} />
      <p id="errorUserMessage"><p>{errorUserMessage}</p></p>
      <input type="text" onChange={handlePassChange} />
      <p id="errorPassMessage"><p>{errorPassMessage}</p></p>
      <input type="text" onChange={handlePassCheck} />
      <p id="errorPassCheck"><p>{errorPassCheck}</p></p>
    </form>
  );
}

export default Form;

追記

eventハンドラ関数の中を呼ばれたタイミングでは変数が更新されていないため1回遅れています。

    const newPass = e.target.value
    if (str.test(newPass) === false || newPass.length < 7) {

とするか

または

useEffect(() => {
    if (str.test(pass) === false || pass.length < 7) {
    // ...
}, [pass])

というふうに useEffect 内でバリデーションするかに変えてみてください。

Comments

[front]

記述方法についてご指摘ありがとうございます。
修正対応いたします。

本題であるform入力時の挙動について、私の力足らずで解決できておりません。
お手数ですがこちらについても指摘いただけると幸いです。

■問題ケース
[User]
・入力値 test01 (6文字入力)
→6文字入力するもエラー文が消えてくれない。
　7文字目を入力するとエラー文が消える。

[pass]
・入力値 testpass (8文字入力)
→8文字入力するもエラー文が消えてくれない
9文字目を入力するとエラー文が消える。

[passCheck]
・入力値 testpass (8文字入力)
→passと入力値が同じはずなのに、不一致エラーが発生。
9文字目を入力すると一致となる(その際に一致していなくても正常となる)

[anozon]

追記しました

[front]

ありがとうございます。
@maisumakun @anozon様のおかげで解決することができました。

細かい記載方法まで提示していただきありがとうございました。
未熟者ですが引き続き精進して参ります。

Answer 2

なぜイベント内からReactDOM.renderを行っているのでしょうか。通常は値をstateに持たせて、それで仮想DOMを書き換えれば済む話かと思います。

Comments

[front]

記述方法についてご指摘ありがとうございます。
修正対応いたします。

本題であるform入力時の挙動について、私の力足らずで解決できておりません。
お手数ですがこちらについても指摘いただけると幸いです。

■問題ケース
[User]
・入力値 test01 (6文字入力)
→6文字入力するもエラー文が消えてくれない。
　7文字目を入力するとエラー文が消える。

[pass]
・入力値 testpass (8文字入力)
→8文字入力するもエラー文が消えてくれない
9文字目を入力するとエラー文が消える。

[passCheck]
・入力値 testpass (8文字入力)
→passと入力値が同じはずなのに、不一致エラーが発生。
9文字目を入力すると一致となる(その際に一致していなくても正常となる)

[maisumakun]

> 本題であるform入力時の挙動について

いえ、それも「ReactDOM.renderで無理やり出力している」ことが要因だ、という趣旨の回答です。

[front]

ありがとうございます。
@maisumakun @anozon様のおかげで解決することができました。

ご教授いただきありがとうございました。