Hoy estaba practicando con React y encontré dos formas de obtener valores de entrada al enviar el formulario.
Primero: Usando ganchos, por ejemplo:
... const [name, setName] = useState(''); ... return <input onChange={(value) => setName(value)} value={name} />Segundo: Obtener usando event.target.children[i].value, por ejemplo:
const handleSubmit = (event: BaseSyntheticEvent) => { event.preventDefault(); const formInputs = event.target.children; for (const input in formInputs) { console.log(formInputs[input].value); } };La pregunta es, ¿cuál debo usar y por qué? ¿Es opcional o no lo sé? Tiene algún impacto en el rendimiento.
No utilice la manipulación DOM vainilla en React cuando pueda evitarlo, dentro de lo razonable. El primer enfoque es mucho mejor en la mayoría de las situaciones.
Si la razón por la que tiene la tentación de optar por el segundo enfoque es que tiene muchas entradas y crear un estado separado para cada una es tedioso, una opción es hacer que el estado sea un solo objeto (o Mapa) en su lugar.
const MyInput = ({ name, state, onChange }) => ( <Input name={name} onChange={onChange} value={state[name]} /> ); const onChange = (e) => { setState({ ...state, [e.target.name]: e.target.value }); }; <MyInput name="name" state={state} onChange={onChange}/>