reactjs代码示例：react-dom非受控组件

拼搏现实的明天。 2024-02-17 13:35 63阅读 0赞

这段代码是一个简单的React应用，通过使用React库和ReactDOM库来创建和渲染一个登录组件。该组件包含一个表单，用户可以输入用户名和密码，点击登录按钮后会弹出一个提示框显示用户输入的信息。

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>1_非受控组件</title>
    </head>
    <body>
    	
    	<div id="test"></div>
    	
    	
    	<script type="text/javascript" src="../js/react.development.js"></script>
    	
    	<script type="text/javascript" src="../js/react-dom.development.js"></script>
    	
    	<script type="text/javascript" src="../js/babel.min.js"></script>
    
    	<script type="text/babel">
    		//创建组件
    		class Login extends React.Component{
          
    			handleSubmit = (event)=>{
          
    				event.preventDefault() //阻止表单提交
    				const {
          username,password} = this
    				alert(`你输入的用户名是：${ username.value},你输入的密码是：${ password.value}`)
    			}
    			render(){
          
    				return(
    					<form onSubmit={
          this.handleSubmit}>
    						用户名：<input ref={
          c => this.username = c} type="text" name="username"/>
    						密码：<input ref={
          c => this.password = c} type="password" name="password"/>
    						<button>登录</button>
    					</form>
    				)
    			}
    		}
    		//渲染组件
    		ReactDOM.render(<Login/>,document.getElementById('test'))
    	</script>
    </body>
    </html>