Tenemos el siguiente formulario.
const MyForm = ({ myFormRef, }) => ( <form id="myForm" ref={myFormRef} method="POST"> <input name="request_token" type="hidden" /> <input name="id" type="hidden" /> <input name="versionId" type="hidden" /> <input name="additionalId" type="hidden" /> </form> ); export default MyForm;
Estamos usando useRef hook para hacer referencia a este formulario y llamarlo dentro de otro Componente de la siguiente manera.
const myFormRef = useRef(); <MyForm myFormRef={myFormRef} />
La función postData
al final está en un archivo js.
La pregunta es sobre esta función postData
.
Esto se activa cuando se envía un formulario haciendo clic en un botón.
Todo funciona bien cuando capturo los detalles correctos y puedo enviar el formulario.
La cuestión:
Es el formato de cómo estoy enviando los datos sobre el cual está el problema.
Estoy enviando más detalles en el siguiente formato en este formulario.
{ token, id, versionId, additionalId }
En cambio, quiero enviarlo como:
{ token, overallData: { id, versionId, additionalId } }
¿Cómo puedo modificar el formato de la solicitud para que se ajuste dentro de los datos generales para los 3 campos (el token aún está afuera) antes de enviarlo?
export const postData = ( myFormRef, token, myLink, id, versionId, additionalId ) => { const fields = { request_token: token, id, versionId, additionalId, }; // checking if data exists for a key (example id or token) and remove if no value against the key. [...myFormRef.current.children].forEach((child) => { child.value = fields[child.name]; if (!child.value) { myFormRef.current.removeChild(child); } }); // then submit myFormRef.current.action = myLink; myFormRef.current.submit(); };
Nota: tengo que apegarme a este estilo para usar el formulario y useRef() debido a otras dependencias.
Por lo tanto, buscando una forma de modificar posiblemente postData. De lo contrario aconsejar otras opciones. Gracias.
Prueba esto:
<form id="myForm" ref={myFormRef} method="POST"> <input name="request_token" type="hidden" /> <input name="overallData.id" type="hidden" /> <input name="overallData.versionId" type="hidden" /> <input name="overallData.additionalId" type="hidden" /> </form>