useSubmit
The imperative version of <Form>
that let's you, the programmer, submit a form instead of the user. For example, submitting the form every time a value changes inside the form:
import { useSubmit, Form } from "react-router-dom"; function SearchField() { let submit = useSubmit(); return ( <Form onChange={(event) => { submit(event.currentTarget); }} > <input type="text" name="search" /> <button type="submit">Search</button> </Form> ); }
This can also be useful if you'd like to automatically sign someone out of your website after a period of inactivity. In this case, we've defined inactivity as the user hasn't navigated to any other pages after 5 minutes.
import { useSubmit, useLocation } from "react-router-dom"; import { useEffect } from "react"; function AdminPage() { useSessionTimeout(); return <div>{/* ... */}</div>; } function useSessionTimeout() { const submit = useSubmit(); const location = useLocation(); useEffect(() => { const timer = setTimeout(() => { submit(null, { method: "post", action: "/logout" }); }, 5 * 60_000); return () => clearTimeout(timer); }, [submit, location]); }
The first argument to submit accepts many different values.
You can submit any form or form input element:
// input element events <input onChange={(event) => submit(event.currentTarget)} />; // React refs let ref = useRef(); <button ref={ref} />; submit(ref.current);
You can submit FormData
:
let formData = new FormData(); formData.append("cheese", "gouda"); submit(formData);
The second argument is a set of options that map directly to form submission attributes:
submit(null, { action: "/logout", method: "post", }); // same as <Form action="/logout" method="post" />;
© React Training 2015-2019
© Remix Software 2020-2022
Licensed under the MIT License (MIT).
https://reactrouterdotcom.fly.dev/docs/en/v6/hooks/use-submit