nhunzaker/controlled-input.html Secret

## controlled-input.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Chrome Backspace Issue</title>
    <style>
      body {
        padding: 0 20px;
      }

      hr {
        border-width: 1px 0 0;
        margin: 40px 0;
      }

      div {
        padding: 5px 0;
      }
    </style>
  </head>
  <body>
    <div id="container">Loading...</div>

    <script src="../../build/react.js"></script>
    <script src="../../build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

    <script type="text/babel">
      var Inputs = React.createClass({

        getInitialState() {
          return {
            number: 3.14
          };
        },

        handleNumberChange(event) {
          let next = parseFloat(event.target.value, 10) || 0;

          this.setState({ number: next })
        },

        render() {
          return (
            <div>
              <p>Controlled</p>
              <div>
                <input type="number" value={ this.state.number } onChange={ this.handleNumberChange } /> -> { this.state.number }
              </div>

              <hr />

              <p>Uncontrolled</p>
              <div><input type="number" defaultValue="3.14" /></div>
            </div>
          )
        }
      })

      ReactDOM.render(<Inputs />, document.getElementById('container'))
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Chrome Backspace Issue</title>
	<style>
	body {
	padding: 0 20px;
	}

	hr {
	border-width: 1px 0 0;
	margin: 40px 0;
	}

	div {
	padding: 5px 0;
	}
	</style>
	</head>
	<body>
	<div id="container">Loading...</div>

	<script src="../../build/react.js"></script>
	<script src="../../build/react-dom.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>

	<script type="text/babel">
	var Inputs = React.createClass({

	getInitialState() {
	return {
	number: 3.14
	};
	},

	handleNumberChange(event) {
	let next = parseFloat(event.target.value, 10) \|\| 0;

	this.setState({ number: next })
	},

	render() {
	return (
	<div>
	<p>Controlled</p>
	<div>
	<input type="number" value={ this.state.number } onChange={ this.handleNumberChange } /> -> { this.state.number }
	</div>

	<hr />

	<p>Uncontrolled</p>
	<div><input type="number" defaultValue="3.14" /></div>
	</div>
	)
	}
	})

	ReactDOM.render(<Inputs />, document.getElementById('container'))
	</script>
	</body>
	</html>