Why isn't my React Form sending? - reactjs

Question

I've used this tutorial offline and I have this:
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;
I think it has something to do with this 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('');
}
With the URL but I'm not too sure where to send it to? Is there something very simple I am overlooking here? It renders fine, it validates fine, it's just not sending. I followed this tutorial: https://blog.alexdevero.com/insanely-easy-simple-react-form-tutorial/
Thanks!

Answer 1

You must bind your functions to the component like so:
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);
}
Also, here are the react docs detailing forms: https://facebook.github.io/react/docs/forms.html