In React-Routerthere’s a component that can submit data to the route’s “action.” In actual development, I’m using Ant Design’s ProForm. How can I pass data to the route’s “action” functionally within the ProForm’s onFinish event?
<code>import { Form } from "react-router-dom";
function NewEvent() {
return (
<Form method="post" action="/events">
<input type="text" name="title" />
<input type="text" name="description" />
<button type="submit">Create</button>
</Form>
);
}
</code>
<code>import { Form } from "react-router-dom";
function NewEvent() {
return (
<Form method="post" action="/events">
<input type="text" name="title" />
<input type="text" name="description" />
<button type="submit">Create</button>
</Form>
);
}
</code>
import { Form } from "react-router-dom";
function NewEvent() {
return (
<Form method="post" action="/events">
<input type="text" name="title" />
<input type="text" name="description" />
<button type="submit">Create</button>
</Form>
);
}
I tried using React Router’s hook, useFetcherto submit data. This indeed triggered the action. However, I couldn’t find the submitted ‘values’ in the request.
<code>//Ant Design <ProFom/> onFinsh Event
import { useFetcher } from 'react-router-dom'
const fetcher = useFetcher()
function onFinish(values) {
fetcher.submit(
{
...values,
},
{
method: 'POST',
}
)
}
</code>
<code>//Ant Design <ProFom/> onFinsh Event
import { useFetcher } from 'react-router-dom'
const fetcher = useFetcher()
function onFinish(values) {
fetcher.submit(
{
...values,
},
{
method: 'POST',
}
)
}
</code>
//Ant Design <ProFom/> onFinsh Event
import { useFetcher } from 'react-router-dom'
const fetcher = useFetcher()
function onFinish(values) {
fetcher.submit(
{
...values,
},
{
method: 'POST',
}
)
}
<code>//The action of the current route
export async function action({ request }) {
console.log(request)
//The action was triggered, but I couldn't find the submitted
values in the request.
return null
}
</code>
<code>//The action of the current route
export async function action({ request }) {
console.log(request)
//The action was triggered, but I couldn't find the submitted
values in the request.
return null
}
</code>
//The action of the current route
export async function action({ request }) {
console.log(request)
//The action was triggered, but I couldn't find the submitted
values in the request.
return null
}
New contributor
KOFI is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.