Реагировать на сообщение о переадресации

Question

Я пытаюсь сделать этот вызов, где url - это базовое доменное имя, а model - это объект, передаваемый в POST, но для реакции. (Не хочу использовать jquery в моем приложении для реакции):

$.redirect(url + "external-entrance", model, "POST");

Информация о форме отправляется третьей стороне, которая вычисляет информацию из формы и отображает информацию для меня на своем сайте. В моем текущем решении я использую ссылки для отправки формы. Однако я хочу использовать состояние, так как я могу лучше проверять / маскировать поля, а также отправлять информацию в свой собственный бэкэнд. Но когда я заявляю, что я не могу сделать переадресацию сообщения, как в форме ref="form" method="post" action="url", используя axios post, то windows.location.href это просто приводит меня к ссылке, но не POST к ней.

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: '',
    errors: [],
  }
  this.textInput = React.createRef();
}

_handleSubmit = evt => {
  evt.preventDefault()
  const payload = {
    "first_name": "Thomas",
    "last_name": "Edison",
    "email": "edison@email.com",
    "phone": "555-555-5355",
    "zip_code": 239062,
  }
  this.refs.myForm.submit();
}

render() {
  return (
    <Container>
      <form ref="myForm" method="post" action="https://externalsite.co/external-entrance">
        <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"
              ref={this.textInput}
              disabled={isSending}
              name="firstName"
              placeholder="Thomas"/>
          </label>
          <label>
            Last Name:
            <input
            type="text"
            ref={this.textInput}
            disabled={isSending}
            name="lastName"
            placeholder="Edison"/>
        </label>
        <label>
          Phone Number:
          <input
            type="text"
            ref={this.textInput}
            disabled={isSending}
            name="phoneNumber"
            placeholder="555-555-5555"/>
        </label>
        <label>
          Email address:
          <input
            type="text"
            ref={this.textInput}
            disabled={isSending}
            name="emailAddress"
            placeholder="edison@email.com"/>
        </label>
        <input type="hidden" ref={this.textInput} name="zipCode" value={29006}/>
      </div>
      <Button color={Color.secondaryColor} onClick={this._handleSubmit}>Submit My Reservation</Button>
    </form>
  </Container>
)
}
}

export default ContactForm

Answer 1

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

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

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

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

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

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

• Поскольку мы сохраняем значения полей ввода в состоянии, необходимо добавить функцию к событию "onChange" каждого поля ввода. 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.log({res}))
      .catch(error => {
        console.log({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="edison@email.com"
            />
          </label>
          <input type="hidden" name="zipCode" value={29006} />
        </div>
        <button type="submit">Submit My Reservation</button>
      </form>
    )
  }
}

export default ContactForm