В этом руководстве я использую компонент, основанный на классе, и предполагаю, что вы знакомы с основами реакции.

Я создаю форму, чтобы продемонстрировать вам, и теперь код выглядит так

Теперь начнем с логической части.

1) Создайте соответствие состояния для этих полей ввода и свяжите их обратно с элементами ввода.

Создайте такую ​​государственную собственность

конструктор (реквизит) {

супер (реквизит)

this .state = {

// Напишем тебе штатный заяц

};};

Теперь деструктурируйте их и присвойте их значение методу рендеринга, как это

2) Добавьте обработчик изменения, чтобы отслеживать изменение входного значения.

При изменении входного значения будет вызвана функция changeHandler.

Установите значение состояния

Реализуйте такую ​​функцию

3) Теперь отправьте эти данные формы с помощью обработчика отправки.

Для этого я создаю кнопку отправки в форме

Обработайте данные отправки формы с помощью submitHnadler следующим образом

Теперь реализуйте submitHnadler и в submitHandler вы должны написать эту строку «e.preventDefault ()», чтобы избежать обновления страницы.

Готово, теперь вы можете делать что угодно с данными, например, вы можете отправить данные в базу данных или сохранить их в локальном хранилище или что-нибудь еще.

4) Отправить данные в базу данных на axios

Первый импорт аксиом с помощью этого « импорта аксиом из 'axios' »

Теперь в submitHandler мы делаем такой почтовый запрос

Спасибо, что прочитали это, я надеюсь, что это поможет вам в вашем путешествии по React 🎉