Как в react отправить форму на указанный адрес?

Question

Ребята, приветствую. Подскажите пожалуйста один момент. в react, при работа с формой , если используем сторонние библиотеки (reactbootstrap или antdesign например) как происходит отправка формы ? имеется в виду адрес, на который форма должна уходить при заполнении полей. этот вопрос не очень подробно расписан в документации есть вопросы как это работает в реальной жизни . Например в обычной html-форме атрибуты action, method указывают адрес и метод отправки. как это работает в react ? на страницах документации https://react-bootstrap.github.io/components/forms/#forms-api и https://ant.design/components/form/#API ничего не нашел подходящего

Answer 1

Насколько я понимаю, ничего не мешает также в компоненте react, как и в "обычном html" использовать action и method.
Если нужен больший контроль над отправкой, можно использовать атрибут onSubmit для обработки этого события и самостоятельной отправки с помощью сторонней библиотеки типа Axios или с помощью встроенных средств типа fetch.

Вот пример с осуществлением такого запроса с Axios:

try {
    const {data} = await axios.post('http://...', dataObj);
    console.log('Returned data:', responseData);
} catch (e) {
    console.log('Axios request failed:', e);
}

А вот с fetch:

try {
    const response = await fetch('http://...', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json;charset=utf-8'
        },
        body: JSON.stringify(dataObj)
    });
    let result = await response.json();
} catch (e) {
    console.log('Axios request failed:', e);
}

Только не забудьте, что для использования await функция должны выполняться асинхронно (перед функцией async). А также в функции обработчике нужно предотвратить выполнения обработки по умолчанию с помощью метода .preventDefault() объекта события

Answer 2

Вы можете использовать те же в атрибуты что и обычные html формы: action и method

Вы так же можете использовать колбэк onSubmit, который вернет вам event формы.

Подробней о том как можно управлять формами в реакте вы можете ознакомится здесь

Если вы хотите получить доступ ко всем полям формы в реакте и по каким-то причинам не можете достать их из стейта, то можете использовать FormData. В этом случае колбэк будет выглядеть примерно вот так:

onSubmit={({target, preventDefault})=>{
  preventDefault()
  const data = new FormData(target);
  // дальше данные можно послать на бэкэнд 
  // с помощью какой нибудь http request библиотеки, например axios
  // или с помощью встроенного fetch
}}

БЛОГ НА HUSL

Как в react отправить форму на указанный адрес?

Ответы (2 шт):