Tengo algunos problemas para averiguar cómo puedo obtener el estado de un campo de entrada y agregarlo a una matriz useState.
La forma en que se configura este código, usando onChange, agregará cada carácter que escriba en textField como una nueva parte de la matriz, pero no quiero establecer el valor hasta que el usuario termine de escribir.
¿Cuál sería una solución simple a esto?
Mi código:
const [subject, setSubject] = useState([]);` <input type="text" placeholder={"Eks. 'some example'"} onChange={(e) => setSubject(oldArray => [...oldArray, e.target.value])}/>Bueno, todavía no estoy seguro de reaccionar, pero a menos que no quieras hacer alguna validación, ¿por qué no usas la combinación useRef hook y onBlur? El gancho UseRef básicamente establece una referencia en el elemento y luego puede usar el valor de esa referencia, que en su caso sería el valor de textField. OnBlur se activará cuando el usuario haga clic fuera de la entrada (la entrada pierde el foco) El código debería verse así:
import react, {useRef, useState} from "react"; const someComponent = (props) => { const [subject, setSubject] = useState([]); const textAreaRef = useRef(); const onBlurHandler = () => { setSubject((prevSubject) => [...prevSubject, textAreaRef.current.value]); } return <input type="text" placeholder={"Eks. 'some example'"} ref={textAreaRef} onBlur={onBlurHandler}/> }Otra forma sería usar el antirrebote con useEffet.
esto es algo que preparé para ti... observa el cambio de la entrada, y 1 segundo después de que la persona deja de escribir, agregará el valor de entrada.
Las principales cosas a observar aquí son useEffect() y <input /> con el nuevo estado que hice [input, setInput] . o puedes jugar con esto aquí
export default function App() { const [subjects,setSubjects] = useState([]); const [input,setInput] = useState("") useEffect(() => { const timer = setTimeout(() => { setSubjects(old => [...old, input]) }, 1000) return () => clearTimeout(timer) }, [input]) return ( <div className="App"> <h1>Hello CodeSandbox</h1> <input placeholder="type here" value={input} type="text" onChange={e => setInput(e.target.value)} /> {subjects.length === 0 ? <h3>Nothing yet...</h3> : <h3>{subjects}</h3> } </div> ); }