获取表单提交的结果

Question

I have the following form:

<form onSubmit={this.gotEmail}>
  <div className="form-group">
    <FormControl type="text" className="form-control"/>
  </div>
  <Button className="btn btn-primary btn-large centerButton" type="submit">Send</Button>
</form>

When submitted, I would like to get the field written by the user here:

<FormControl type="text" className="form-control"/>

I tried getting it like this:

gotEmail: function(email) {
    console.log("Email: ", JSON.stringify(email))
}

However, I get this error:

EmailForm.jsx:9 Uncaught TypeError: Converting circular structure to JSON 

When I try to print email in the console I am getting this:

(program):132 Uncaught illegal access

How can I get the user's input?

Answer 1

In plain JavaScript you would probably do the following :

HTML:

<form action="getInput()">
<input type="text" id="email" class="form-control/>
</form>

JS:

function getInput(){
var email = document.getElementById("email").value;
alert(email);
}

Answer 2

The proper way to access an HTML element of your component in React is:

import { findDOMNode } from 'react-dom'

[...] // all your other script stuff here

render() {
  return (
    <form onSubmit={this.gotEmail}>
      <div className="form-group">
        <FormControl ref="email" type="text" className="form-control"/>
      </div>
      <Button className="btn btn-primary btn-large centerButton" type="submit">Send</Button>
    </form>
  )
}

gotEmail() {
  console.log(findDOMNode(this.refs.email).value)
}