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>
)
}
}
React 受控组件和非受控组件的更多相关文章
- React:受控组件与非受控组件混用实战 - 译文
原文链接:React: hybrid controlled components in action 受控组件 非受控组件 混用受控组件和非受控组件 原则一 原则二 原则三 原则四 实施方案 总结 F ...
- 浅谈react受控组件与非受控组件
引言 最近在使用蚂蚁金服出品的一条基于react的ant-design UI组件时遇到一个问题,编辑页面时input输入框会展示保存前的数据,但是是用defaultValue就是不起作用,输入框始终为 ...
- React受控组件和非受控组件
受控组件和非受控组件主要是用来解决表单组件状态谁来控制的问题.因为用户的输入会反应在界面上,相当于视图的状态发生了变化,而react是通过虚拟DOM比对修改视图的,这里就要决定谁来控制表单组件的状态. ...
- react 表单(受控组件和非受控组件)
我们知道表单元素与其他的普通DOM元素来说是不一样的,它们保存了自己的一些状态. 我们主要说的就是表单元素中的受控组件和非受控组件. 受控组件就是这个组件的状态是我们(react)控制的,这个组件的行 ...
- react中 受控组件和 非受控组件 浅析
一 受控组件 顾名思义,受控 也就是能够被控制,简而言之也就是 该组件ui的显示或者内部state逻辑的变化依赖外部的 props的传入. 二 非受控组件 顾名思义,非受控,也就是内部的视图变化,st ...
- react第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能)
第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能) #课程目标 理解因为react的单向数据流 理解表单组件会因为react数据流变的不好维护 理解受控组件与非受控组件的实质区别 理解 ...
- Vue父子组件及非父子组件如何通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数 ...
- 学习React系列(四)——受控组件与非受控组件
受控组件:通过组件的状态与属性的改变来控制组件 不可控组件:直接通过底层的dom来控制组件(具体来说就是通过绑定再底层dom上的方法来实现的,比如说ref,onChange) 受控组件 functio ...
- React组件之间通过Props传值的技巧(小案例,帮助体会理解props、state、受控组件和非受控组件等)
本文重要是根据react小书上的一个很简单的例子改编的,加上自己的学习理解,希望可以通过实际案例让大家对概念有更清晰的理解,当然也希望能一块学习. import React,{Component} f ...
随机推荐
- Pwn-level3(x64)
题目地址 https://dn.jarvisoj.com/challengefiles/level3_x64.rar.8c74c402b190ac3fbef5a9ae540c40de 跟level3差 ...
- ubuntu中安装rabbitmq服务并成功启动
在我们使用rabbitmq时,首先要对其进行安装,而后才能对其进行使用 安装 Erlang 由于 RabbitMQ 是采用 Erlang 编写的,所以需要安装 Erlang 语言库.就像 java 需 ...
- Educational Codeforces Round 69 (Rated for Div. 2) D. Yet Another Subarray Problem 背包dp
D. Yet Another Subarray Problem You are given an array \(a_1, a_2, \dots , a_n\) and two integers \( ...
- 中国移动明确5G手机入网技术标准:四大要求缺一不可!
原文: https://m.sohu.com/a/355533798_208899?strategyid=00014 日前,中国移动在2020年5G终端产品规划中明确了一系列详细的技术要求,针对明年入 ...
- git 邮箱错误-git log 中发现 XXX@163.com邮箱不符合要求,请务必使用公司邮箱。
场景描述: 重新配置电脑之后,提交了git,邮箱发生错误. git log # 查看日志git reset 版本 # 回到之前的版本,版本回退git config --global user.name ...
- iOS Workflow 分享 - Create QR Code
上次我分享了一个 Scan QR Code 的 Workflow,这次我分享一个正好相反的.如果我要分享一个 URL(或者是一段非常短的文本)给别人,我就可以用这个 Workflow 来生成 QR C ...
- c#菜单动态合并 z
说明 在程序中经常使用弹出菜单,并且一个窗体中可以存在多个弹出菜单.开发过MDI窗体的读者可能都知道,当MDI子窗体最大化时,子窗体和主窗体的菜单能够自动的合并.这是如何实现的呢?本例实现了将两个弹出 ...
- Ubuntu 16.04 + OpenCV 自定义环境变量 pkg-config / PKG_CONFIG_PATH
0. 前言 今天在执行一段脚本的时候,爆出错误: Package opencv was not found in the pkg-config search path. Perhaps you sho ...
- 1+x 证书 Web 前端开发 JavaScript 专项练习
官方QQ群 1+x 证书 Web 前端开发 JavaScript 专项练习 http://blog.zh66.club/index.php/archives/198/
- python-1-基础认识
前言 将近2020年,python2即将不再更新,但是我们现在的python3也能非常受欢迎的!回顾一下2/3的区别: 1.python2 源码不标准,混乱,重复代码太多, 2.python3 统一 ...