使用关键字reactpostformdatatoapi谷歌搜索来阅读this

首先，您必须有一个 API 端点连接到 MySQL 数据库并且可以执行所需的任务。

接下来，您必须决定是使用第三方解决方案（如 react-hook-form）还是编写自己的方法来处理表单。然后，如果您更喜欢自己做，您必须选择是使用 axios、plain fetch 还是其他方式在该端点上执行 xhr。

您可以通过使用关键字 react post form data to api 进行谷歌搜索来阅读本教程或任何其他教程。

一个最小的示例可能如下所示：创建用户状态

const [user, setUser] = useState();

然后将您的表单更改为：

  ...

然后在输入标签中添加一个 onChange 处理程序，以在每次输入更改时更新用户状态。

然后创建一个 onSubmit 响应式回调方法，在该方法中我们阻止表单提交的默认性质并将用户状态作为主体发布到 API 端点。我们必须使用 useCallback 来确保发布到端点的用户状态是最新的用户状态值。

  const onSubmit = useCallback((e) => {
    e.preventDefault();
    fetch("/api/user", {
      method: "POST",
      body: JSON.stringify({ user }),
      headers: { "Content-Type": "application/json" },
    }).then((res) => res.json());
  },[user]);

最少的代码是这样的：

export default function UserForm() {
  const [user, setUser] = useState();
  const onSubmit = useCallback((e) => {
    e.preventDefault();
    fetch("/api/user", {
      method: "POST",
      body: JSON.stringify({ user }),
      headers: { "Content-Type": "application/json" },
    }).then((res) => console.log(res.json()));
  },[user]);
  return (
    

      
         setUser({ ...user, name: e.target.value })}
        />
        

         setUser({ ...user, email: e.target.value })}
        />
        

         setUser({ ...user, news: e.target.value })}
        />
        

         setUser({ ...user, jahresurlaub: e.target.value })}
        />
        

        
      
    
  );
}