Как разрешить дополнительный пост-запрос в методе onSubmit в React - PullRequest
Новая
       24

Как разрешить дополнительный пост-запрос в методе onSubmit в React

0 голосов
/ 27 июня 2019

Я хочу, чтобы в методе 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

Ответы [ 2 ]

0 голосов
/ 28 июня 2019

Решением моей проблемы было использование useRef и вызов submit () в форме с обработчиком внешней кнопки onClick .

Пример: 

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>
  </>
);
0 голосов
/ 27 июня 2019

Измените метод onSubmit на асинхронную функцию, чтобы использовать шаблон async / await 

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

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