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> </> ); }en este caso, inicialmente el botón está deshabilitado, pero cuando escribo un botón de número está habilitado, pero necesito hasta que el usuario proporcione un número de teléfono de 10 dígitos. El botón está deshabilitado.
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> </> ); }Puedes probar esto:
He agregado el enlace al código https://codesandbox.io/s/happy-swartz-ikqdn?file=/src/input.js
Vaya a https://ikqdn.csb.app/input en codesandbox browser
Lo que te falta en el código es
function handleChange(e) { setValue(e.target.value); if (e.target.value.length <10) <-- not updating the disable if length = 10 { setDisable(true); } } y en la input y button de error y deshabilitar
Phn:<input error={disable} type="number" value={value} onChange={handleChange}/> <button disabled={!disable}>click</button>Ambos están en estado alternativo, es decir, si uno se vuelve válido, el otro se vuelve inválido.
Inicialmente disabled debe ser true porque la entrada está vacía y
Tomé el valor inicial de input como null como indicador de que no se hizo clic.
Esta es la condición del error input entrada. Se hace clic en la entrada y la longitud es != 10
value !== null && disable