Estoy usando react-bootstrap/Modal y react-hook-form. Quiero que el usuario inserte datos en la entrada que después de enviar irán a la función donde quiero hacer un objeto con ellos.
<form onSubmit={handleSubmit(update)}> <Modal show={show} onHide={handleClose}> <Modal.Header closeButton> <Modal.Title>Edit</Modal.Title> </Modal.Header> <Modal.Body> <label>Description</label> <input name="message" type="text" ref={register} placeholder="description"/> </Modal.Body> <Modal.Footer> <button variant="secondary" onClick={handleClose}> Cancel </button> <button type="submit" variant="primary" onClick={update}> Edit </button> </Modal.Footer> </Modal> </form> //I will need the async function later to await an api call. const update = (data) => { (async () => { console.log("data", data) })() }¡Gracias por ayudar!
EDITAR:
Encontré la solución, tenía que poner el formulario en el modal pero fuera de los componentes modales.
<Modal show={show} onHide={handleClose}> <form onSubmit={handleSubmit(update)}> <Modal.Header closeButton> <Modal.Title>Edit</Modal.Title> </Modal.Header> <Modal.Body> <label>Description</label> <input name="message" type="text" placeholder="description" /> </Modal.Body> <Modal.Footer> <button variant="secondary" onClick={handleClose}> Cancel </button> <button type="submit" variant="primary" onClick={update}> Edit </button> </Modal.Footer> </form> </Modal>Dado que está utilizando los react-hook-forms , simplemente puede obtener el resultado después del envío del formulario.
El objeto de resultado se ve así en su caso: {mensaje: "algunos datos del mensaje"}
Por lo tanto, debe obtener la propiedad "mensaje" del parámetro de data en la función de update .
Nota: pasa el message como la propiedad de nombre de su elemento de input , por lo que data.message le dará los datos correspondientes en el elemento de input que está controlado por react-hook-forms
const update = (data) => { (async () => { console.log("data", data.message) })() }