Question

我已离线使用本教程，我有：

import React from 'react';
import '../Normalize.css';
import '../App.css';
import $ from 'jquery';

class ReactFormLabel extends React.Component {
constructor(props) {
  super(props);
}
render() {
    return(
     <label htmlFor={this.props.htmlFor}>{this.props.title}</label>
    )
  }
}

class ReactForm extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
    name: '',
    email: '',
    subject: '',
    message: ''
  }
}

handleChange = (e) => {
  let newState = {};
  newState[e.target.name] = e.target.value;
  this.setState(newState);
};

handleSubmit = (e, message) => {
  e.preventDefault();

  let formData = {
    formSender: this.state.name,
    formEmail: this.state.email,
    formSubject: this.state.subject,
    formMessage: this.state.message
  }

  if (formData.formSender.length < 1 || formData.formEmail.length < 1 || formData.formSubject.length < 1 || formData.formMessage.length < 1) {
  return false;
  }

  $.ajax({
    url: '/some/url',
    dataType: 'json',
    type: 'POST',
    data: formData,
    success: function(data) {
    if (window.confirm('Thank you for your message. Can I erase the form?')) 
{
 document.querySelector('.form-input').val('');
}
},
error: function(xhr, status, err) {
  console.error(status, err.toString());
  alert('There was some problem with sending your message.');
 }
});

this.setState({
  firstName: '',
  lastName: '',
  email: '',
  subject: '',
  message: ''
});
};

render() {
  return(
    <form className='react-form' onSubmit={this.handleSubmit}>
      <fieldset className='form-group'>
        <ReactFormLabel htmlFor='formName' title='Full Name:' />
        <input id='formName' className='form-input' name='name' type='text' required onChange={this.handleChange} value={this.state.name} />
      </fieldset>
      <fieldset className='form-group'>
        <ReactFormLabel htmlFor='formEmail' title='Email:' />
        <input id='formEmail' className='form-input' name='email' type='email' required onChange={this.handleChange} value={this.state.email} />
      </fieldset>
      <fieldset className='form-group'>
        <ReactFormLabel htmlFor='formSubject' title='Subject:'/>
        <input id='formSubject' className='form-input' name='subject' type='text' required onChange={this.handleChange} value={this.state.subject} />
      </fieldset>
      <fieldset className='form-group'>
        <ReactFormLabel htmlFor='formMessage' title='Message:' />
        <textarea id='formMessage' className='form-textarea' name='message' required onChange={this.handleChange}></textarea>
      </fieldset>
      <div className='form-group'>
        <input id='formButton' className='btn' type='submit' placeholder='Send message' />
      </div>
    </form>
    )
  }
 };

export default ReactForm;

我认为这与本节有关：

$.ajax({
    url: '/some/url',
    dataType: 'json',
    type: 'POST',
    data: formData,
    success: function(data) {
    if (window.confirm('Thank you for your message. Can I erase the form?')) 
{
 document.querySelector('.form-input').val('');
}

使用网址，但我不太确定将其发送到哪里？我在这里有一些非常简单的东西吗？它渲染得很好，它验证很好，它只是不发送。我遵循了本教程：https://blog.alexdevero.com/insanely-easy-simple-react-form-tutorial/

谢谢！

Answer 1

您必须将您的功能绑定到组件，如下所示：

class ReactForm extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            name: '',
            email: '',
            subject: '',
            message: ''
        } 

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

此外，以下是详细说明表格的反应文档：https://facebook.github.io/react/docs/forms.html

为什么不发送我的React表格？

1 个答案: