0
287
Vistas¿Cómo usar entradas controladas y no controladas en la misma forma de reacción?
Tengo un formulario en el que no necesito realizar un seguimiento de los cambios en tiempo real para una parte de los datos y solo necesito los datos finales. Quiero saber cómo enviar un <select> controlado y un <input> no controlado en el mismo formulario.
mi código para estados y controladores:
const [ethValue, setEthValue] = useState(""); const ethValueRef = useRef(); const handleBet = (e) => { const newEthValue = ethValueRef.current.value; setEthValue(newEthValue); e.preventDefault(); }; const [formData, setFormData] = React.useState({ userTeamChosen: "", eventNumber: 0, }) function handleChange(event) { const { name, value, type, checked } = event.target setFormData(prevFormData => { return { ...prevFormData, [name]: type === "checkbox" ? checked : value } }) }mis formularios:
<form onSubmit={handleBet}> <select onChange={handleChange} name="userTeamChosen" value={formData.userTeamChosen}> <option>--choose---</option> <option value={a}>{a}</option> <option value={b}>{b}</option> <option value={c}>{c}</option> </select> <input type="number" defaultValue={ethValue} ref={ethValueRef} name="value" /> <button>Submit</button> </form>¿Cómo envío ambos formularios?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Recomendaría no usar referencias en este caso y, en su lugar, optar por un formulario completamente basado en el estado. También hubo algunas inconsistencias que ahora se corrigen.
La entrada de su número coincide con el nombre de su formulario y está siendo manejada por su función handleChange existente.
<input type="number" name="eventNumber" value={formData.eventNumber} onChange={handleChange} /> Además, he agregado una pequeña función de submit de depuración a su formulario:
const submit = () => { alert(JSON.stringify(formData)); }; ... <form onSubmit={submit}> ... 
·
Juan Pablo Isaza
Denunciar
Responde la pregunta