如何验证电话号码以做出反应，直到用户提供有效的电话号码按钮应禁用

Question

import React,{useState} from "react";
export default function Validate() {
  const [value, setValue] = useState("");
  const [disable, setDisable] = useState(false);
  function handleChange(e) {
    setValue(e.target.value);
    if (e.target.value.length <10)
     {
      setDisable(true);
    }
  }
  return (
    <>
      Phn:<input error={disable} type="number" value={value} onChange={handleChange}/>
      <button disabled={!disable}>click</button> 
    </>
  );
}

in this case initially button is disabled but when i type one number button is enabled but i need untill user give 10 digit phone number button is disabled

Answer 1

import React,{useEffect, useState} from "react";
export default function Validate() {
  const [value, setValue] = useState("");
  const [disable, setDisable] = useState(true);
  function handleChange(e) {
    setValue(e.target.value);
  }
  useEffect(() => {
    setDisable(value.length !== 10);
  }, [value])
  return (
    <>
    Phn:<input error={disable} type="number" value={value} onChange={handleChange}/>
    <button disabled={disable}>click</button> 
    </>
  );
}

Answer 2

You can try this:

I have added the link to the code https://codesandbox.io/s/happy-swartz-ikqdn?file=/src/input.js

Go to https://ikqdn.csb.app/input in codesandbox browser

---

What you are missing in the code is

function handleChange(e) {
    setValue(e.target.value);
    if (e.target.value.length <10) <-- not updating the disable if length = 10
     {
      setDisable(true); 
    }
  }

and in the input and button error and disable

Phn:<input error={disable} type="number" value={value} onChange={handleChange}/>
<button disabled={!disable}>click</button> 

Both are in alternative state, ie if one becomes valid, then other becomes invalid.

---

Initially disabled must be true because input is empty and

I have taken initial value of input as null as an indicator of not clicked.

This is the condition of input error Input is clicked and the length != 10

value !== null && disable