Question

I am trying make this call where url is the base domain name and model is the object being passed into the POST but for react. (Do not want to use jquery in my react application):

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

The form information is being sent to a third party where they are calculating the information from the form and displaying information to me on their site. In my current solution, I am using refs to submit the form. However, I want to use state since I can validate/mask the fields better and also send the information to my own backend. But when I uue state I cannot do a post redirect like in form ref="form" method="post" action="url", using axios post then windows.location.href it just takes me to the link but doesn't POST to it.

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

我认为您在评估中做错了几件事。

无需创建表单的引用，也无需添加 “帖子” 和 < em>“ action” 标记到表单。您只需要将 “ onSubmit” 属性设置为将用于进行API调用<form onSubmit={this._handleSubmit}>
基于我的第一点，您需要设置表单内按钮的类型，该表单将用于向{{1} }。
在声明不使用ES6的函数时，必须将函数绑定到类构造函数中（ “ SendLead（）” 函数），例如<button type="submit"></button>

最好将表单输入保存在类状态上，这样可以更轻松地执行验证或将验证传递给其他组件或其他组件。

您可以在类的构造函数中的状态上设置该值，而不是使用隐藏的输入字段。

由于我们将输入字段的值保存为状态，因此您需要向每个输入字段的 “ onChange” 事件添加一个函数。 this.SendLead = this.SendLead.bind(this)

这些是我可以在代码中指出的主要内容。我做了一些调整以使其正常工作，但是基本上我只是按照上面提到的做。

onChange={this._handleInputChange}

React Redirect Post

1 个答案: