React Redirect Post

Есть несколько вещей, которые, как мне кажется, вы делаете неправильно в моих оценках.

• Нет необходимости создавать ссылку на форма, а также добавлять в форму теги "Почта" и "действие". Вам просто нужно установить свойство "onSubmit" для функции, которую вы будете использовать для вызова API <form onSubmit = {this._handleSubmit}>.

• Основываясь на моем первом пункте, вам нужно установить тип кнопки внутри формы, которую вы будете использовать для отправки формы в <button type = "submit"></button>.

• При объявлении функции, если вы не используете ES6, вам придется привязать функцию в конструкторе класса (в случае вашей функции "SendLead ()"), например this.SendLead = this.SendLead.bind(this)

• Лучше сохранить входные данные формы в состоянии класса, так будет проще выполнять проверки или передавать их другому компоненту или чему-то еще.

• Вместо использования скрытого поля ввода вы можете установить это значение в состоянии в конструкторе вашего класса.

• Поскольку мы сохраняем значения полей ввода в состоянии, вам необходимо добавить функцию к событию "по изменению" каждого поля ввода. onChange = {this._handleInputChange}

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

import React from 'react'
import axios from 'axios'
// import { H3, P } from '../../components/StyledHeading'
// import Button from '../../components/Button'


class ContactForm extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      firstName: '',
      lastName: '',
      email: '',
      phone: '',
      zipCode: 29006,
      errors: [],
    }
  }

  SendLead = payload => {
    const URL = "http://localhost:3001/v1"
    const authToken = "Token token=5e2pJ5P234234123"
    const config = { "headers": { Authorization: authToken } }
    const bodyParams = payload

    axios.post(`${URL}/leads`, bodyParams, config)
      .then(res => console.info({res}))
      .catch(error => {
        console.info({error})
        this.setState({
          errors: error.response.data,
        })
      })

  }

  _handleInputChange = e => 
    this.setState({
      [e.target.name]: e.target.value
    })


  _handleSubmit = evt => {
    evt.preventDefault()
    const {
      firstName,
      lastName,
      email,
      phone,
      zipCode
    } = this.state;

    const payload = {
      "first_name": firstName,
      "last_name": lastName,
      "email": email,
      "phone": phone,
      "zip_code": zipCode,
    }
    this.SendLead(payload)
  }

  render() {
    const {
      firstName,
      lastName,
      email,
      phone,
      zipCode
    } = this.state;

    return (
      <form onSubmit = {this._handleSubmit}>
        <h3>Ready to reserve your spot?</h3>
        <p className = "subtitle">Fill out the form below and we&rsquo;ll get in touch soon.</p>
        <div className = "inputFieldSection">
          <label>
            First Name:
            <input
              type = "text"
              value = {firstName}
              onChange = {this._handleInputChange}
              // disabled = {isSending}
              name = "firstName"
              placeholder = "Thomas" />
          </label>
          <label>
            Last Name:
            <input
              type = "text"
              value = {lastName}
              onChange = {this._handleInputChange}
              // disabled = {isSending}
              name = "lastName"
              placeholder = "Edison" />
          </label>
          <label>
            Phone Number:
              <input
              type = "text"
              value = {phone}
              onChange = {this._handleInputChange}
              // disabled = {isSending}
              name = "phone"
              placeholder = "555-555-5555"
            />
          </label>

          <label>
            Email address:
              <input
              type = "text"
              value = {email}
              onChange = {this._handleInputChange}

              // disabled = {isSending}
              name = "email"
              placeholder = "[email protected]"
            />
          </label>
          <input type = "hidden" name = "zipCode" value = {29006} />
        </div>
        <button type = "submit">Submit My Reservation</button>
      </form>
    )
  }
}

export default ContactForm