Get form data in ReactJS

There are a few ways to do this:

1) Get values from array of form elements by index

handleSubmit = (event) => {  event.preventDefault();  console.log(event.target[0].value)}

2) Using name attribute in html

handleSubmit = (event) => {  event.preventDefault();  console.log(event.target.elements.username.value) // from elements property  console.log(event.target.username.value)          // or directly}<input type="text" name="username"/>

3) Using refs

handleSubmit = (event) => {  console.log(this.inputNode.value)}<input type="text" name="username" ref={node => (this.inputNode = node)}/>

Full example

class NameForm extends React.Component {  handleSubmit = (event) => {    event.preventDefault()    console.log(event.target[0].value)    console.log(event.target.elements.username.value)    console.log(event.target.username.value)    console.log(this.inputNode.value)  }  render() {    return (      <form onSubmit={this.handleSubmit}>        <label>          Name:          <input            type="text"            name="username"            ref={node => (this.inputNode = node)}          />        </label>        <button type="submit">Submit</button>      </form>    )  }}

Use the change events on the inputs to update the component's state and access it in handleLogin:

handleEmailChange: function(e) {   this.setState({email: e.target.value});},handlePasswordChange: function(e) {   this.setState({password: e.target.value});},render : function() {      return (        <form>          <input type="text" name="email" placeholder="Email" value={this.state.email} onChange={this.handleEmailChange} />          <input type="password" name="password" placeholder="Password" value={this.state.password} onChange={this.handlePasswordChange}/>          <button type="button" onClick={this.handleLogin}>Login</button>        </form>);},handleLogin: function() {    console.log("EMail: " + this.state.email);    console.log("Password: " + this.state.password);}

Working fiddle.

Also, read the docs, there is a whole section dedicated to form handling: Forms

Previously you could also use React's two-way databinding helper mixin to achieve the same thing, but now it's deprecated in favor of setting the value and change handler (as above):

var ExampleForm = React.createClass({  mixins: [React.addons.LinkedStateMixin],  getInitialState: function() {    return {email: '', password: ''};  },  handleLogin: function() {    console.log("EMail: " + this.state.email);    console.log("Password: " + this.state.password);  },  render: function() {    return (      <form>        <input type="text" valueLink={this.linkState('email')} />        <input type="password" valueLink={this.linkState('password')} />        <button type="button" onClick={this.handleLogin}>Login</button>      </form>    );  }});

Documentation is here: Two-way Binding Helpers.

An alternative approach is to use the ref attribute and reference the values with this.refs. Here is a simple example:

render: function() {    return (<form onSubmit={this.submitForm}>        <input ref="theInput" />    </form>);},submitForm: function(e) {    e.preventDefault();    alert(React.findDOMNode(this.refs.theInput).value);}

More info can be found in the React docs:https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute

For a lot of the reasons described in How do I use radio buttons in React? this approach isn't always the best, but it does present a useful alternative in some simple cases.