reactjs中收集表单数据：非受控组件和受控组件

1_非受控组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>1_非受控组件</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><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} = thisalert(`你输入的用户名是：${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>

2_受控组件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>2_受控组件</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Login extends React.Component{//初始化状态state = {username:'', //用户名password:'' //密码}//保存用户名到状态中saveUsername = (event)=>{this.setState({username:event.target.value})}//保存密码到状态中savePassword = (event)=>{this.setState({password:event.target.value})}//表单提交的回调handleSubmit = (event)=>{event.preventDefault() //阻止表单提交const {username,password} = this.statealert(`你输入的用户名是：${username},你输入的密码是：${password}`)}render(){return(<form onSubmit={this.handleSubmit}>用户名：<input onChange={this.saveUsername} type="text" name="username"/>密码：<input onChange={this.savePassword} type="password" name="password"/><button>登录</button></form>)}}//渲染组件ReactDOM.render(<Login/>,document.getElementById('test'))</script>
</body>
</html>

reactjs中收集表单数据：非受控组件和受控组件相关推荐

php中的全局变量$_POST收集表单数据
< !-- php中的$POST被广泛的用于手机表单数据,在HTML中from的标签指定的该属性是method="post" 下面我们将显示一个输入的字段,以及一个提交的按钮 ...
07 【收集表单数据】
07 [收集表单数据] 在 React 里,HTML 表单元素的工作方式和其他的 DOM 元素有些不同,这是因为表单元素通常会保持一些内部的 state.例如这个纯 HTML 表单只接受一个名称: & ...
elementUI清空弹框中的表单数据
点击此处直达应用场景示例官网:https://element.eleme.cn/#/zh-CN/component/form 补充:改变表头颜色: <el-table :data=" ...
vue自动提交表单_(尚012)Vue表单数据的自动手集(表单数据提交,需要收集表单数据)...
自动收集,就是我一输入数据,就自动收集,等我点击提交按钮的时候,数据就收集好了 1.使用v-model对表单数据自动收集 1)text/textare----单行/多行输入框 2)checkbox-- ...
Struts2 表单和非表单标签
学习内容 Struts 2表单标签 Struts 2非表单标签能力目标熟练使用Struts 2表单标签开发表单熟练使用Struts 2非表单标签本章简介上一章讲述了ognl和Struts2标 ...
python获取表单数据的代码_使用flask和python从html表单获取表单数据
我正在尝试在按下submit时从文本字段中获取表单数据,以便将其放入json格式并作为另一个页面访问json数据,该页面将是localhost:5000/info.每次我试图用request.form ...
Django中的表单如何使用? Django如何验证前端发来的数据? ✧*｡٩(ˊᗜˋ*)و✧*｡ Django初体验
文章目录前期准备前端准备表单基础使用创建表单表单类型 Field CharField(Field) IntergerField(Field)与 FloatField(Filed) Decim ...
在Servlet中处理表单提交的数据
Servlet的主要功能是处理客户端的表单请求数据,在Servlet中首先对这些数据进行验证,可能会封装到JavaBean,接下来调用数据库的业务逻辑方法将数据保存或者进行其他操作,最后Servlet ...
form表单、控制器中接收表单提交数据的4种方式
Form表单这篇文章主要讲的是form表单的提交之前我们接触过的form表单元素是在Bootstrap框架里面,这次也将用到Bootstrap框架去布局(见图表1)通过Bootstrap框架布局呈 ...

reactjs中收集表单数据：非受控组件和受控组件

1_非受控组件

2_受控组件

reactjs中收集表单数据：非受控组件和受控组件相关推荐

最新文章

热门文章