REECT JS-输入OnChange事件在键入1个额外字符之前，将电话号码设置为有效

Question

我在React应用程序中使用验证器软件包（ https://www.npmjs.coms.coms.coms.coms.coms.coms.coms.coms.coms.coms.coms.coms.coms.com/package/validator-validator ）处理不同的验证示例。我正在挣扎的一个是valies.ismobilephone（）。

import React, {useState} from "react";
import validator from 'validator'

export default function Login() {

let [phone, setPhone] = useState("")
let [valid, isValid] = useState("")

const setPhoneNum = (event) => {
    setPhone(event.target.value)
    isValid(validatePhoneNumber(event.target.value))
}

const validatePhoneNumber = (event) => {
    let isValidPhoneNumber = validator.isMobilePhone(phone, "en-US")
    return (isValidPhoneNumber)
}

return (
    <>
    ...
    <input
      type="tel"
      className="w-full input-primary pl-8 focus:outline-none"
      onChange={setPhoneNum}
      value={phone}
      placeholder="123 456 7890"
    />
    ...
    <>
)
}

Login.layout = Auth

在输入额外的数字之前，这与onChange事件无关，直到输入发生更改后才设置电话值。我认为我需要的是在键盘上设置电话的价值，但只是无法弄清楚

15308675309 -IsvalidphoneNumber -False

153086753091 -IsvalidphoneNumber-

Answer 1

问题在这里，您将事件作为arg，而在功能中未使用。

const validatePhoneNumber = (event) => {
    let isValidPhoneNumber = validator.isMobilePhone(phone, "en-US")
    return (isValidPhoneNumber)
}

因为，您正在通过价值

const validatePhoneNumber = (value) => {
    let isValidPhoneNumber = validator.isMobilePhone(value, "en-US")
    return (isValidPhoneNumber)
}

const Login = () => {
  let [phone, setPhone] = React.useState("");
  let [valid, isValid] = React.useState("");

  const setPhoneNum = (event) => {
    setPhone(event.target.value);
    isValid(validatePhoneNumber(event.target.value));
  };

  const validatePhoneNumber = (value) => {
    let isValidPhoneNumber = validator.isMobilePhone(value, "en-US");
    console.log(isValidPhoneNumber, value)
    return isValidPhoneNumber;
  };

  return (
    <input
      type="tel"
      className="w-full input-primary pl-8 focus:outline-none"
      onChange={setPhoneNum}
      value={phone}
      placeholder="123 456 7890"
    />
  );
};

const domContainer = document.querySelector('#app');
ReactDOM.render(<Login />, domContainer);

<script src="https://unpkg.com/validator@latest/validator.min.js"></script>

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="app"> </div>