Rufen Sie die useFetcher-Methode von Router 6 im Formular ab
P粉993712159
P粉993712159 2023-09-06 23:16:42
0
1
487

Ich habe keine andere Wahl, als die Submit-Methode des Getters im Handler aufzurufen. Es greift auf die richtige Aktionsmethode im Router zu, aber ich kann diese Methode nicht an die Aktion übergeben, die im Formular definierte method='POST 。如何访问处理程序内的fetch.Form-Methode?

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粉993712159
P粉993712159

Antworte allen(1)
P粉739942405

尝试这个解决方案,将方法传递给 handlerLogin 函数:

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>
);
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage