React 受控组件和非受控组件
时间:2019-10-03
本文章向大家介绍React 受控组件和非受控组件,主要包括React 受控组件和非受控组件使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
需求
用户名自动获取 onChange用户状态发生改变 就获取值 就是时时获取值 使用onChange
点击按钮 获取密码
只要绑定了点击事件 就可以获取值 通过
let usercont=event.target.value;//获取用户的值
ref获取值的另外一种用法
密码: <input type="password" ref={this.Myrefs}></input>
Myrefs = React.createRef();//创建一个承装ref的容器 Myrefs一致
let pwd = this.Myrefs.current
consolr.log(pwd)
import React, { Component } from "react"
export default class Login extends Component {
state={
username:""
}
changecon = (event) => { //event是某个被绑定的事件 可以使用它代替ref
let usercont=event.target.value;//获取用户的值
this.setState({
username: usercont
})
console.log(this.state.username)
}
Myrefs = React.createRef();//创建一个承装ref的容器 Myrefs一致
subcon=(event)=>{
event.preventDefault()
let pwd = this.Myrefs.current
alert(pwd.value)
}
// 用户名是受控组件 :会自动维护state
// 密码框是 非受控组件 :不会自动维护state
render() {
return (
<div>
<form>
{/* onChange用户状态发生改变 就获取值 就是时时获取值 使用onChange */}
用户名:<input type="text" onChange={this.changecon}></input>
密码: <input type="password" ref={this.Myrefs}></input>
<button onClick={this.subcon}>按钮</button>
</form>
</div>
)
}
}
原文地址:https://www.cnblogs.com/IwishIcould/p/11619316.html
- 第三周编程作业-Planar data classification with one hidden layerPlanar data classification with one hidden l
- 用R语言照葫芦画瓢撸了一个简易代理~
- 左手用R右手Python——CSS网页解析实战
- R语言数据抓取实战——RCurl+XML组合与XPath解析
- Python网络数据抓取实战——Xpath解析豆瓣书评
- 左手用R右手Python系列17——CSS表达式与网页解析
- 左手用R右手Python系列16——XPath与网页解析库
- 扒一扒rvest的前世今生!
- RCurl中这么多get函数,是不是一直傻傻分不清!!!
- 机器学习(二)深度学习实战-使用Kera预测人物年龄问题描述引入所需要模块加载数据集创建模型编译模型优化optimize1 使用卷积神经网络optimize2 增加神经网络的层数输出结果结果
- 异步加载的基本逻辑与浏览器抓包一般流程
- 左手用R右手Python系列之——表格数据抓取之道
- XML/HTML/JSON——数据抓取过程中不得不知的几个概念
- R语言网络数据抓取的又一个难题,终于攻破了!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android RollPagerView实现轮播图
- Android UI设计与开发之使用ViewPager实现欢迎引导页面
- Android ListView里控件添加监听方法的实例详解
- Android实现底部图片选择Dialog
- AndroidImageSlider实现炫酷轮播广告效果
- Android获取手机本机号码的实现方法
- Android中RecyclerView的item宽高问题详解
- Andoroid实现底部图片选择Dialog效果
- Android中ExpandableListView使用示例详解
- Android 高德地图之poi搜索功能的实现代码
- Android实现底部弹出按钮菜单升级版
- Android实现单页面浮层可拖动view的示例代码
- 漫画:最长公共子序列
- RecyclerView的简单使用
- Android Parcelable接口使用方法详解