Suck Less at React: Understanding refs

form-component-example.jsx

import React from 'react'
import propTypes from 'prop-types'
import { render } from 'react-dom'

class Form extends React.Component {
  static propTypes = {
    onSubmit: propTypes.func.isRequired,
  }
  render() {
    return (
      <form onSubmit={this.props.onSubmit}>
        <input name="example" type="text" />
      </form>
    )
  }
}

class App extends React.Component {
  constructor(...rest) {
    super(...rest)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.state = {
      status: 'Not submitted!',
    }
  }
  handleSubmit(e) {
    e.preventDefault()
    this.setState({
      status: 'Form submitted!'
    })
  }
  render() {
    return [
      <span key="0">{this.state.status}</span>,
      <Form key="1" onSubmit={this.handleSubmit} />,
    ]
  }
}

render(<App />, document.getElementById("root"))