Uncontrolled form

by Rich Costello

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class Content extends React.Component {
	constructor(props) {
  	super(props)
    this.submit = this.submit.bind(this)
    this.prompt = 'Please enter your email to win $1,000,000'
  }
  submit(event) {
   let emailAddress = this.refs.emailAddress
   let comments = this.refs.comments
   console.log(ReactDom.findDOMNode(emailAddress).value)
   console.log(ReactDom.findDOMNode(comments).value)
	}
	render() {
  	return (
    	<div className="well">
    	  <p>{this.prompt}</p>
        <div className="form-group">
          Email: <input refs="emailAddress" className="form-control" type="text" placeholder="[email protected]" />
        </div>
        <div className="form-group">
          Comments: <textarea ref="comments" className="form-control" placeholder="I like your website" />
        </div>
        <div className="form-group">
          <a className="btn btn-primary" value="Submit" onClick={this.submit}>Submit</a>
        </div>
    	</div>
    )
  }
}

ReactDOM.render(
  <Content/>,
  document.getElementById('container')
);