React Formが送信されないのはなぜですか？

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

URL付きのが、私はどこすぎてよく分からないがそれを送るには？非常にシンプルなものがありますか？ここで見落とされていますか？それはうまくレンダリング、それは罰金を有効にする、それは送信していないだけです。私はこのチュートリアルに従った：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