react-form-data

react-form-data

React form data is a React mixin that will allow you to get data from an html form in a nice javascript object format.

installation

npm i react-form-data -S

or if you prefer the verbose format:

npm install react-form-data --save

usage

• Create a component containing form elements.
• Add the form data mixin to the component
• On an element wrapping all input elements, bind the onChange handler to this.updateFormData
• You will now have access to the form data by accessing this.formData

example

var React = require('react');
var FormData = require('react-form-data');
var MyForm = React.createClass({
  mixins: [ FormData ],
  handleSubmit: function() {
     var url = 'urlToSendDataTo';
     myRequestLib.post(url, this.formData);
  },
  render: function() {
    return (
      <form onChange={this.updateFormData} onSubmit={this.handleSubmit}>
          //input elements
      </form>
    )
  }
});

input elements

react-form-data supports input, textarea and select elements. The name of an element is used as key in the created object and the value is fetched form the entered text, the selected option element or the defined value on the checked radio button.

checkboxes

Checkboxes can be used in two different ways.

• A single checkbox can map true or false to its key.
• Several checkboxes can be used to map an array of values to the same key.

To use case 1, don't give the checkbox a value:

  <input type="checkbox" name="acceptTerms" />

this.formData.acceptTerms will be true or false depending on if the checkbox is checked or not.

To use case 2, create several checkboxes with the same name but different values:

  <input type="checkbox" name="skills" value="javascript" />
  <input type="checkbox" name="skills" value="coffeescript" />
  <input type="checkbox" name="skills" value="haskell" />

this.formData.skills will be an array of the checked values. E.g. [ 'javascript', 'coffeescript' ]

methods

When adding the mixin to your component, these methods will be available on it:

getInitialFormData()

Implement this method to let this.formData be a non empty object in its initial state. Useful when you want to edit an existing entity. Any changes to the form will be added to this object.

formDataDidChange()

Called whenever there is a change in the form. The new data is available in this.formData.

setFormData(key, value)

Manually update this.formData with key and value

clearFormData()

Sets this.formData to an empty object.

resetFormData(obj)

Makes a shallow clone of object and replaces this.formData with the clone.

demo

This repository contains a demo. To run it, clone the repo and execute npm run demo. You can now view the demo by visiting http://localhost:3000