I have no choice but to call the getter's submit method in the handler. It's accessing the correct action method in the router, but I can't pass that method to the action, which is method='POST
defined in the form. How do I access the fetch.Form
method inside the handler?
const fetcher = useFetcher() const handlerLogin = useCallback(async () => { console.log(fetcher.formMethod) //-> outputting undefined fetcher.submit({ value: 'social' }, { method: fetcher.formMethod }) },[]) return ( <Card className={styles.loginCard}> <fetcher.Form method='POST' action='/'> ..............
P粉7399424052023-09-07 13:20:35
Try this solution, passing the method to the handlerLogin
function:
const fetcher = useFetcher(); const handlerLogin = useCallback(async (formMethod) => { fetcher.submit({ value: 'social' }, { method: formMethod }); }, []); return ( <Card className={styles.loginCard}> <fetcher.Form method='POST' action='/' > {/* other parts ... */} <button onClick={() => handlerLogin(fetcher.formMethod)}> Submit </button> </fetcher.Form> </Card> );