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

爱被打了一巴掌 2024-02-17 13:36 18阅读 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

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

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

爱被打了一巴掌/ 2024年02月17日 13:36/ 0 赞/ 19 阅读

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

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

拼搏现实的明天。/ 2024年02月17日 13:35/ 0 赞/ 64 阅读

相关 reactjs类式组件代码示例

执行了`ReactDOM.render(<MyComponent/>.......`之后，发生了什么？ 1.React解析组件标签，找到了MyComponent组件。

末蓝、/ 2024年02月17日 13:17/ 0 赞/ 26 阅读

相关 reactjs函数式组件代码示例

如下展示了如何创建和渲染函数式组件的示例。首先，创建了一个名为MyComponent的函数式组件，并在JSX中使用。然后，使用ReactDOM.render函数将组件渲染到页面

青旅半醒/ 2024年02月17日 13:17/ 0 赞/ 67 阅读

相关 reactjs受控组件和非受控组件

非受控组件通过使用ref属性获取值。 ![在这里插入图片描述][39ab7454698d44ad862cf6f07d30c35e.png_pic_center]

╰+攻爆jí腚メ/ 2023年09月28日 16:50/ 0 赞/ 119 阅读

相关 React-受控组件

所谓的“受控组件”简单来说就是组件的状态受 React 控制。在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）之类的表单元素通常

港控/mmm°/ 2023年07月04日 15:46/ 0 赞/ 136 阅读

相关 react---受控组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

清疚/ 2023年06月06日 15:27/ 0 赞/ 28 阅读

相关 react受控组件和非受控组件

react受控组件和非受控组件父组件的代码 import Control from './Control' //

深藏阁楼爱情的钟/ 2023年05月31日 15:28/ 0 赞/ 4 阅读

相关 react的受控组件、非受控组件ref

import React from 'react' export default class CommentBox extends React.Componen

今天药忘吃喽~/ 2022年03月28日 04:19/ 0 赞/ 241 阅读

相关受控组件与非受控组件

文章目录受控组件更新state的流程例子非受控组件例子受控组件所谓受控组件就是每当表单的状态发生变

妖狐艹你老母/ 2021年12月12日 23:57/ 0 赞/ 288 阅读