Question

我想在React的onSubmit方法中使用axios调用发布请求，并基于该发布请求的结果阻止表单提交。

const onSubmit = (event: any) => {
  const data: IName = {
     name: ""
  };

  try {
    axios.post<IName>(`/api/saveName`, data)
      .catch((err) => {
        event.preventDefault();
      });
  } catch (err) {
    event.preventDefault();
  }
};

return (
  <>
    <form action={myApi} name="MyName" method="post" onSubmit={onSubmit} >
  </>
);

event.preventDefault永远不会触发，因为在离开onSubmit之前没有解决承诺问题

Answer 1

将onSubmit方法更改为异步功能以使用异步/等待模式

onSubmit = async (event: any) => {
  const data: IName = {
     name: ""
  };

  try {
    await axios.post<IName>(`/api/saveName`, data)
  } catch (err) {
    // Handle error
  }
  event.preventDefault();
};

Answer 2

我的问题的解决方案是使用 useRef 并通过外部按钮的 onClick 处理程序在表单上调用 submit（）。

示例：

const form = useRef<HTMLFormElement>(null);
const onSubmit = (event: any) => {
  const data: IName = {
   name: ""
  };

  axios.post<IName>(`/api/saveName`, data)
    .then((response) => {
      if (response.status === 200 && form.current) {
        form.current.submit();
      }
    })
    .catch((err) => {
      event.preventDefault();
    });
};

return (
  <>
    <form action={myApi} name="MyName" method="post" onSubmit={onSubmit} >
    <button onClick={onSubmit}>Send Form</button>
  </>
);

我如何在React的onSubmit方法中解决其他发布请求

2 个答案: