0
127
VistasVerifique la entrada mientras se escribe ReactJS
Me gustaría verificar una entrada a medida que se escribe, sin presionar una tecla o un botón de forma asíncrona. Me gustaría establecer un valor de variables en verdadero si una persona ha escrito más de 4 letras.
Creo que también estaría bien si el valor se establece en verdadero (si el valor es de 4 letras o más) después de que el usuario haga clic fuera del cuadro de entrada, pero prefiero lo primero
Código simulado
var hasTypedMoreThan4Letters = false; //changes to true when more than 4 letters are typed in inp1 <input type="text" className="input1" id="inp1" onChange={onTypingMoreThan4Letters}/>No estoy seguro si ayuda, pero la imagen simulada a continuación
3 Respuestas
Responde la pregunta0
Necesita componentes controlados (entrada controlada). Aquí está mi versión usando ganchos. Obtiene la cantidad de símbolos ingresados en la variable de count .
import "./styles.css"; import { useState } from "react"; export default function App() { const [count, setCount] = useState(0); function handleInput(e) { setInput(e.target.value); setCount((prev) => prev + 1); } const [input, setInput] = useState(""); return ( <div className="App"> <input value={input} onInput={handleInput} /> <p>{count}</p> </div> ); }0
Probablemente podrías hacer algo como esto. Esto comprobará si se han escrito más de 4 letras y mostrará un mensaje si hasMore es verdadero.
import React from 'react'; export default function App() { const [hasMore, setHasMore] = React.useState(false) const [val, setVal] = React.useState(""); const hasTypedMoreThan4Letters = (e)=>{ setHasMore(e.target.value.length > 4) setVal(e.target.value) } return ( <div className="App"> <input type="text" className="input1" id="inp1" value={val} onChange={hasTypedMoreThan4Letters}/> {hasMore && ( <h1> has more than 4 letters</h1> )} </div> ); }0
No veo una razón por la que deba tener un segundo estado para la longitud del valor.
function App() { const [value, setValue] = useState(''); const hasTypedMoreThan4Letters = value.length > 4; const handleChange = (event) => { setValue(event.target.value); } return <input onChange={handleChange} value={value} />; }