Estoy tratando de enviar un formulario usando el gancho useSubmit de Remix. Pero quiero poder pasar datos arbitrarios junto con los datos de envío de mi formulario.
Tengo elementos de formulario con algunos valores estáticos que tienen atributos deshabilitados/solo lectura, lo que significa que su valor será nulo al enviar el formulario. Sin embargo, tengo acceso a sus valores reales en mi variable de post , que quiero enviar a mi acción.
export const action: ActionFunction = async (request) => { // I want access to {arbitraryData} here passed from submit } export default function EditSlug() { const post = useLoaderData(); // ...Submit handler passing arbitrary data (post.title in this case) const handleSubmit = (event: any) => { submit( { target: event?.currentTarget, arbitraryData: post.title }, { method: "post", action: "/admin/edit/{dynamicRouteHere}" } ); }; return( <Form method="post" onSubmit={handleSubmit}> <p> <label> Post Title: <input type="text" name="title" value={post.title} disabled readOnly /> </label> </p>¿Hay alguna forma de recibir datos personalizados en mi acción usando handleSubmit?
Otra forma de hacer esto es
export const action: ActionFunction = async (request) => { // I want access to {arbitraryData} here passed from submit // Now u can get this in formData. } export default function EditSlug() { const post = useLoaderData(); const formRef = useRef<HtmlFormElement>(null); //Add a form ref. // ...Submit handler passing arbitrary data (post.title in this case) const handleSubmit = (event: any) => { const formData = new FormData(formRef.current) formData.set("arbitraryData", post.title) submit( formData, //Notice this change { method: "post", action: "/admin/edit/{dynamicRouteHere}" } ); }; return( <Form ref={formRef} method="post" onSubmit={handleSubmit}> <p> <label> Post Title: <input type="text" name="title" value={post.title} disabled readOnly /> </label> </p>De esta manera, está alterando el formData original y agregando otra clave y usándola para enviar el formulario.
(Por lo que vale, las entradas de solo lectura se envían al formulario, mientras que las deshabilitadas no, por lo que tal vez pueda usar solo lectura)
Para enviar datos arbitrarios a una acción, puede usar entradas ocultas:
<Form method="post" onSubmit={handleSubmit}> <p> <label> Post Title: <input type="text" name="title" value={post.title} disabled readOnly /> <input type="hidden" name="title" value={post.title} /> </label> </p>