React.js how to I go about getting data from my form and posting it

Question

I'm currently learning React.js and am having trouble using a jquery or ajax call that returns the information in my form to a post. Basically what ever info is in the form, after submit, make a post of the data in a

tag.

Here is my code:

var BasicInputBox = React.createClass({

  render: function() {
    return (
      <div>
        <label>{this.props.label}</label>
        <br/>
        <input type="text" onChange={this.props.valChange} value={ this.props.val} />
        <br/>
      </div>
    );
  }
});

var CommentBox = React.createClass({
  render: function() {
    return (
      <div>
        <label>Have a question?</label>
        <br/>
        <textarea type="text" onChange={this.props.valChange} value={ this.props.val} />
        <br/>
      </div>
    );
  }
});

var SubmitButton = React.createClass({
  render: function() {
    return (
      <div>
        <button type="submit" onClick={this.props.submit}>
          Submit
        </button>
      </div>
    );
  }
});

var Contact = React.createClass({
  getInitialState: function() {
    return {}
  },
  submit: function(e) {
    e.preventDefault()

    console.log(this.state);
    this.setState({
      name: "",
      email: "",
      comment: ""
    })
  },

  nameChange: function(e) {
    this.setState({
      name: e.target.value
    })
  },
  emailChange: function(e) {
    this.setState({
      email: e.target.value
    })
  },
  commentChange: function(e) {
    this.setState({
      comment: e.target.value
    })
  },


  render: function() {
    return (
      <form>
        <BasicInputBox label="Name:" valChange={this.nameChange} val={this.state.name}/>
        <BasicInputBox label="Email:" valChange={this.emailChange} val={this.state.email}/>
        <CommentBox valChange={this.commentChange} val={this.state.comment}/>
        <SubmitButton submit={this.submit}/>
      </form>

    );
  }
});

React.render(
  <Contact></Contact>,
  document.body
);

Answer 1

As @BinaryMuse noted the problem here is that your submit method is not really doing any submitting. You mentioned that the way you want to do this is via AJAX, and thus you need to 1) include jQuery (or Zepto) on your page, and 2) make the ajax call. Here is one way to accomplish the second part:

1) First, you don't really need to provide the submit method as a property to the submit button. When the submit button is clicked inside a form, it will trigger the form's onSubmit event, so you can simply attach the this.submit method there.

Also, you don't really need I don't think to create a separate component for the Submit button. That kind of granularity may not be justified here since you can accomplish the same thing with far fewer lines of code. So I'd remove your SubmitButton component and update your Contact component render function to be:

    render: function(){
       return (
        <form onSubmit={this.submit}>
          <BasicInputBox label="Name:" valChange={this.nameChange} val={this.state.name}/>
          <BasicInputBox label="Email:" valChange={this.emailChange} val={this.state.email}/>
          <CommentBox valChange={this.commentChange} val={this.state.comment}/>
          <button type="submit">Submit</button>
        </form>
      );
    }

2) Next you can change your submit method in this way, adding an AJAX call. Depending on the details of the server/API to which you are sending the form you may need to modify the AJAX call a bit, but what I have put here is a fairly generic form that has a good chance of working:

submit: function (e){
  var self

  e.preventDefault()
  self = this

  console.log(this.state);

  var data = {
    name: this.state.name,
    email: this.state.email,
    comment: this.state.comment
  }

  // Submit form via jQuery/AJAX
  $.ajax({
    type: 'POST',
    url: '/some/url',
    data: data
  })
  .done(function(data) {
    self.clearForm()
  })
  .fail(function(jqXhr) {
    console.log('failed to register');
  });

}

Note: that I also encapsulated the code you had previously for clearing the form inside its own function, which is called if the AJAX call returns a success.

I hope this helps. I put the code in a jsFiddle where you could test it a bit: https://jsfiddle.net/69z2wepo/9888/