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.         submitHandle=(e)=>{
    20.            const {username,password}=this
    21.              e.preventDefault()
    22.            alert("我的名字"+username.value+"我的密码"+password.value)
    23.         }
    24.         render(){
    25.             return (
    26.                <form action="" onSubmit={this.submitHandle}>
    27.                 用户名：<input type="text" placeholder="请输入用户名" name="name" ref={c=>this.username=c}/>
    28.                 密码：<input type="password" placeholder="请输入密码" name="password" ref={c=>this.password=c} />
    29.                 <button >登录</button>
    30.                 </form>
    31.             )
    32.         }
    33.     }
    35.     ReactDOM.render(<Input/>,document.getElementById("app"))
    36.     </script>
    37. </body>
    39. </html>

    页面中输入类的dom现用现取就是非控类型的组件