react-forms

react-forms.jsx

///##################
/// Create Form Component
class CreateTask extends React.Component {

  handleSuccess: function() {
    this.context.router.push('/trips');
  },

  handleSubmit: function(data) {
    const _this = this;

    let data = new FormData();
    for (let [key, value] of Object.entries(a)) {
      data.append(key, value);
    }

    fetch("http://localhost:3000/tasks", {
      method: "POST",
      headers: {},
      body: data
    }).then(function (res) {
      if (res.ok) {
        _this.handleSuccess();
      } else if (res.status == 401) {
        alert("Oops! ");
      }
    }, function (e) {
      alert("Error submitting form!");
    });
  },

  render: function() {
    return (
      <div className="donationBox">
        <h1>Create Task</h1>
        <TaskForm onFormSubmit={this.handleSubmit} />
      </div>
    )
  }
}

// if router is needed
CreateTask.contextTypes = {
    router: React.PropTypes.object.isRequired
};

export default CreateTask;


///##################
/// Form Component
export default class TaskForm extends React.Component {
  getInitialState: function() {
    return {
      name: null,
      comment: null,
      public: null
    };
  },

  compomentDidMount: function() {
    // if data has been passed from the parent, set it
    if (this.props.data) {
      this.setState(this.props.data);
    }
  },

  handleFormSubmit: function(e) {
    //we don't want the form to submit, so we prevent the default behavior
    e.preventDefault();
    
    let data = {};
    data.name = this.state.name.trim();
    data.comment = this.state.comment.trim();
    data.public = this.state.public;
    data.photo = document.getElementById('photo').files[0];

    //simple validation
    if (!data.name || !data.comment) {
      return;
    }
    
    //Here we do the final submit to the parent component
    this.props.onFormSubmit(data);
    // this.setState(getInitialState()); //reset the form
  },

  handleChange: function(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    this.setState({ [name]: value });
  }

  render: function() {
    return (
      <form className="donationForm" onSubmit={ this.handleFormSubmit }>
        <input type="text" value={ this.state.name } onChange={ this.handleChange } />
        <input type="checkbox" checked={ this.state.public } onChange={ this.handleChange } />
        <textarea value={ this.state.comment } onChange={ this.handleChange } ></textarea>
        <input type="file" name="photo" id="photo" />
      </form>
    );
  }
}


///##################
/* json form: */
const _this = this;
fetch("http://localhost:3000/tasks", {
  method: "POST",
  headers: {},
  body: JSON.stringify(data)
}).then(function (res) {
  if (res.ok) {
    alert("Done! ");
  } else if (res.status == 401) {
    alert("Oops! ");
  }
}, function (e) {
  alert("Error submitting form!");
});