受控组件类似于vue中的数据双向绑定，可以将页面中输入类的控件绑定到state状态中

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9. </head>
    11. <body>
    12.     <div id="app"></div>
    13.     <script src="../js/react.development.js"></script>
    14.     <script src="../js/react-dom.development.js"></script>
    15.     <script src="../js/babel.min.js"></script>
    16.     <script src="../js/prop-types.js"></script>
    17.     <script type="text/babel">
    18.         class Input extends React.Component {
    19.             state = {
    20.                 inputValue: ''
    21.             }
    22.             changeHandle = (e) => {
    23.                 //这里可以拿到表单的值
    24.                 this.setState({
    25.                     inputValue: e.target.value
    26.                 })
    27.             }
    28.             render() {
    29.                 return (
    30.                     <form action="" >
    31.                         用户名：<input type="text" placeholder="请输入用户名" name="name" onChange={this.changeHandle} />
    32.                         <button >登录</button>
    33.                     </form>
    34.                 )
    35.             }
    36.         }
    38.         ReactDOM.render(<Input />, document.getElementById("app"))
    39.     </script>
    40. </body>
    42. </html>