react - valid

電話番号を入力するフォーム。

電話番号は”０”から始めないとエラーと判断し、入力さえできない仕様。

 

 

全体コード

      const App = () => {
        const [message, setMessage] = React.useState("");
        const [phoneNumber, setPhoneNumber] = React.useState("");

        const handleSubmit = (event) => {
          event.preventDefault();
          alert(phoneNumber);
        };

        const handleChange = (event) => {
          // setPhoneNumber(event.target.value);
          //if (phoneNumber.startsWith(0)) { 
          if (event.target.value.startsWith(0)) {
            setMessage("Phone Number is valid");
            setPhoneNumber(event.target.value);
          } else if (event.target.value.length === 0) {
            setPhoneNumber("");
            setMessage("");
          } else {
            setPhoneNumber("");
            setMessage("Phone Number should starts with 0");
          }
        };
        // controlled - inputのvalueを直接管理すること
        return (
          <form onSubmit={handleSubmit}>
            <label htmlFor="phone">Phone Number:</label>
            <br />
            <input
              id="phone"
              name="phone"
              onChange={handleChange}
              value={phoneNumber}
            />
            <p>{message}</p>
            <br />
            <button
              type="submit"
              disabled={
                phoneNumber.length === 0 || message != "Phone Number is valid"
              }
            >
              Submit
            </button>
          </form>
        );
      };

 

 

入力都度、handleChangeでvalidチェックを実施。

inputのvalueではphoneNumberというstateを直接設定することにより、inputのvalueを直接管理する。(controlledという。)

buttonでは、間違った電話番号ならsubmitできなくする。

        return (
          <form onSubmit={handleSubmit}>
            <label htmlFor="phone">Phone Number:</label>
            <br />
            <input
              id="phone"
              name="phone"
              onChange={handleChange}
              value={phoneNumber}
            />
            <p>{message}</p>
            <br />
            <button
              type="submit"
              disabled={
                phoneNumber.length === 0 || message != "Phone Number is valid"
              }
            >
              Submit
            </button>
          </form>
        );

 

inputに入力した電話番号のvalidチェックを実施する。

setPhoneNumberをif文前に記述してその次にphoneNumberを参照したが、これだとシンクが取れなくなるのでsetした後stateをすぐ参照するのは良くない！

        const handleChange = (event) => {
          // setPhoneNumber(event.target.value);
          //if (phoneNumber.startsWith(0)) { 
          if (event.target.value.startsWith(0)) {
            setMessage("Phone Number is valid");
            setPhoneNumber(event.target.value);
          } else if (event.target.value.length === 0) {
            setPhoneNumber("");
            setMessage("");
          } else {
            setPhoneNumber("");
            setMessage("Phone Number should starts with 0");
          }
        };