Pourquoi mon formulaire React Form n'est-il pas envoyé?

Question

J'ai utilisé ce tutoriel hors ligne et j'ai ceci:

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; 

Je pense qu'il a quelque chose à voir avec cette section:

$.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(''); 
} 

Avec l'URL, mais je ne suis pas trop sûr où l'envoyer? Y a-t-il quelque chose de très simple que je néglige ici? Ca rend bien, ça valide bien, c'est juste pas envoyer. J'ai suivi ce tutoriel: https://blog.alexdevero.com/insanely-easy-simple-react-form-tutorial/

Merci!

Answer 1

Vous devez lier vos fonctions au composant comme ceci:

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); 
    } 

De plus, voici REACT docs formes détaillant: https://facebook.github.io/react/docs/forms.html