【React系列】受控非受控组件

本文来自#React系列教程:https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg5MDAzNzkwNA==&action=getalbum&album_id=1566025152667107329)

一. refs 的使用

在React的开发模式中,通常情况下不需要、也不建议直接操作DOM原生,但是某些特殊的情况,确实需要获取到DOM进行某些操作:

  • 管理焦点,文本选择或媒体播放。
  • 触发强制动画。
  • 集成第三方 DOM 库。

1.1. 创建 ref 的方式

如何创建refs来获取对应的DOM呢?目前有三种方式:

  • 方式一:传入字符串
    • 使用时通过 this.refs.传入的字符串格式获取对应的元素;
  • 方式二:传入一个对象
    • 对象是通过 React.createRef() 方式创建出来的;
    • 使用时获取到创建的对象其中有一个current属性就是对应的元素;
  • 方式三:传入一个函数
    • 该函数会在DOM被挂载时进行回调,这个函数会传入一个 元素对象,我们可以自己保存;
    • 使用时,直接拿到之前保存的元素对象即可;

代码演练:

import React, { PureComponent, createRef } from 'react'export default class App extends PureComponent {constructor(props) {super(props);this.titleRef = createRef();this.titleEl = null;}render() {return (<div><h2 ref="title">String Ref</h2><h2 ref={this.titleRef}>Hello Create Ref</h2><h2 ref={element => this.titleEl = element}>Callback Ref</h2><button onClick={e => this.changeText()}>改变文本</button></div>)}changeText() {this.refs.title.innerHTML = "你好啊,李银河";this.titleRef.current.innerHTML = "你好啊,李银河";this.titleEl.innerHTML = "你好啊,李银河";}
}

1.2. ref 节点的类型

ref 的值根据节点的类型而有所不同:

  • ref 属性用于 HTML 元素时,构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性;
  • ref 属性用于自定义 class 组件时,ref 对象接收组件的挂载实例作为其 current 属性;
  • 你不能在函数组件上使用 ref 属性,因为他们没有实例;

这里我们演示一下ref引用一个class组件对象:

在这里插入图片描述

import React, { PureComponent, createRef } from 'react';class Counter extends PureComponent {constructor(props) {super(props);this.state = {counter: 0}}render() {return (<div><h2>当前计数: {this.state.counter}</h2><button onClick={e => this.increment()}>+1</button></div>)}increment() {this.setState({counter: this.state.counter + 1})}
}export default class App extends PureComponent {constructor(props) {super(props);this.counterRef = createRef();}render() {return (<div><Counter ref={this.counterRef}/><button onClick={e => this.increment()}>app +1</button></div>)}increment() {this.counterRef.current.increment();}
}

函数式组件是没有实例的,所以无法通过ref获取他们的实例:

  • 但是某些时候,我们可能想要获取函数式组件中的某个DOM元素;
  • 这个时候我们可以通过 React.forwardRef ,后面我们也会学习 hooks 中如何使用ref

1.3 ref 转发

import React, { PureComponent, createRef } from 'react';function Home(props) {return (<div><h2 ref={props.ref}>Home</h2><button>按钮</button></div>)
}export default class App extends PureComponent {constructor(props) {super(props);this.homeTitleRef = createRef();}render() {return (<div><Home ref={this.homeTitleRef}/><button onClick={e => this.printInfo()}>打印ref</button></div>)}printInfo() {console.log(this.homeTitleRef);}
}

使用forwardRef

import React, { PureComponent, createRef, forwardRef } from 'react';const Home = forwardRef(function(props, ref) {return (<div><h2 ref={ref}>Home</h2><button>按钮</button></div>)
})export default class App extends PureComponent {constructor(props) {super(props);this.homeTitleRef = createRef();}render() {return (<div><Home ref={this.homeTitleRef}/><button onClick={e => this.printInfo()}>打印ref</button></div>)}printInfo() {console.log(this.homeTitleRef.current);}
}

二. 受控组件

2.1. 认识受控组件

2.1.1. 默认提交表单方式

在React中,HTML表单的处理方式和普通的DOM元素不太一样:表单元素通常会保存在一些内部的state

比如下面的HTML表单元素:

<form><label>名字:<input type="text" name="name" /></label><input type="submit" value="提交" />
</form>
  • 这个处理方式是DOM默认处理HTML表单的行为,在用户点击提交时会提交到某个服务器中,并且刷新页面;
  • 在React中,并没有禁止这个行为,它依然是有效的;
  • 但是通常情况下会使用JavaScript函数来方便的处理表单提交,同时还可以访问用户填写的表单数据;
  • 实现这种效果的标准方式是使用“受控组件”;

2.1.2. 受控组件提交表单

在 HTML 中,表单元素(如<input><textarea><select>)之类的表单元素通常自己维护 state,并根据用户输入进行更新。

而在 React 中,可变状态(mutable state)通常保存在组件的 state 属性中,并且只能通过使用 setState()来更新。

  • 我们将两者结合起来,使React的state成为“唯一数据源”;
  • 渲染表单的 React 组件还控制着用户输入过程中表单发生的操作;
  • 被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”;

例如,如果我们想让前一个示例在提交时打印出名称,我们可以将表单写为受控组件:

import React, { PureComponent } from 'react'export default class App extends PureComponent {constructor(props) {super(props);this.state = {username: ""}}render() {const {username} = this.state;return (<div><form onSubmit={e => this.handleSubmit(e)}><label htmlFor="username">用户名: <input type="text" id="username" onChange={e => this.handleUsernameChange(e)} value={username}/></label><input type="submit" value="提交"/></form></div>)}handleUsernameChange(event) {this.setState({username: event.target.value})}handleSubmit(event) {console.log(this.state.username);event.preventDefault();}
}

由于在表单元素上设置了 value 属性,因此显示的值将始终为 this.state.value,这使得 React 的 state 成为唯一数据源。

由于 handleUsernameChange 在每次按键时都会执行并更新 React 的 state,因此显示的值将随着用户输入而更新。

2.2. 常见表单的处理

刚才我们演示的是一个input表单的处理,这里我们再演示一下其他的情况。

在这里插入图片描述

2.2.1. textarea标签

texteare标签和input比较相似:

import React, { PureComponent } from 'react'export default class App extends PureComponent {constructor(props) {super(props);this.state = {article: "请编写你喜欢的文章"}}render() {return (<div><form onSubmit={e => this.handleSubmit(e)}><label htmlFor="article"><textarea id="article" cols="30" rows="10"value={this.state.article}onChange={e => this.handleArticelChange(e)}/></label><div><input type="submit" value="发布文章"/></div></form></div>)}handleArticelChange(event) {this.setState({article: event.target.value})}handleSubmit(event) {console.log(this.state.article);event.preventDefault();}
}

2.2.2. select标签

select标签的使用也非常简单,只是它不需要通过selected属性来控制哪一个被选中,它可以匹配statevalue来选中。

我们来进行一个简单的演示:

import React, { PureComponent } from 'react'export default class App extends PureComponent {constructor(props) {super(props);this.state = {fruits: "orange"}}render() {return (<div><form onSubmit={e => this.handleSubmit(e)}><label htmlFor="fruits"><select id="fruits" value={this.state.fruits}onChange={e => this.handleFruitsChange(e)}><option value="apple">苹果</option><option value="orange">橘子</option><option value="banana">香蕉</option></select></label><div><input type="submit" value="提交"/></div></form></div>)}handleFruitsChange(event) {this.setState({fruits: event.target.value})}handleSubmit(event) {console.log(this.state.article);event.preventDefault();}
}

2.2.3. 处理多个输入

多处理方式可以像单处理方式那样进行操作,但是需要多个监听方法:

  • 这里我们可以使用ES6的一个语法:计算属性名(Computed property names)
let i = 0
let a = {['foo' + ++i]: i,['foo' + ++i]: i,['foo' + ++i]: i
}console.log(a.foo1) // 1
console.log(a.foo2) // 2
console.log(a.foo3) // 3let param = 'size'
let config = {[param]: 12,['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4
}console.log(config) // {size: 12, mobileSize: 4}

我们进行对应的代码演练:

import React, { PureComponent } from 'react'export default class App extends PureComponent {constructor(props) {super(props);this.state = {username: "",password: ""}}render() {const {username, password} = this.state;return (<div><form onSubmit={e => this.handleSubmit(e)}><label htmlFor="username">用户: <input type="text" id="username" name="username"onChange={e => this.handleChange(e)} value={username}/></label><label htmlFor="password">密码: <input type="text" id="password" name="password"onChange={e => this.handleChange(e)} value={password}/></label><input type="submit" value="提交"/></form></div>)}handleChange(event) {this.setState({[event.target.name]: event.target.value})}handleSubmit(event) {console.log(this.state.username, this.state.password);event.preventDefault();}
}

三. 非受控组件

React推荐大多数情况下使用 受控组件 来处理表单数据:

  • 一个受控组件中,表单数据是由 React 组件来管理的;
  • 另一种替代方案是使用非受控组件,这时表单数据将交由 DOM 节点来处理;

如果要使用非受控组件中的数据,那么我们需要使用 ref 来从DOM节点中获取表单数据。

我们来进行一个简单的演练:

  • 使用ref来获取input元素;
  • 在非受控组件中通常使用defaultValue来设置默认值;
import React, { PureComponent, createRef } from 'react'export default class App extends PureComponent {constructor(props) {super(props);this.usernameRef = createRef();}render() {return (<div><form onSubmit={e => this.handleSubmit(e)}><label htmlFor="">用户:<input defaultValue="username" type="text" name="username" ref={this.usernameRef}/></label><input type="submit" value="提交"/></form></div>)}handleSubmit(event) {event.preventDefault();console.log(this.usernameRef.current.value);}
}

同样,<input type="checkbox"><input type="radio"> 支持 defaultChecked<select><textarea> 支持 defaultValue

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/597506.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在pycharm中执行 os.makedirs 提示用户名或密码不正确

问题&#xff1a;在pycharm中运行脚本&#xff0c;在 \10.0.21.249\share 共享目录下创建目录提示错误 发现&#xff1a;手动在该目录下创建目录没有问题。 解决方法&#xff1a; 切换到cmd 命令行运行该脚本成功创建 猜测&#xff1a;感觉应该是pycharm中使用的用户名和密码存…

蚂蚁矿机AntMiner T9+引出IO定义

这个板子只有s9的原理图参考&#xff0c;大部分一样但是也有很多改动。 下面是自己测出来的IO。全部为PL&#xff0c;没有PS引出。 共计56个引脚可用&#xff0c;但是不是都是完整的差分对&#xff0c;而且显然有些走线没办法高速跑。 测试方法 万用表先区分VCC GND和IO(对地…

python opencv怎么安装

1、安装python 注意&#xff1a;windows10 安装时强烈建议不用使用 Windows Store 安装。避免后期python运行时牵扯权限相关问题。 具体步骤&#xff1a; 1、前往python官网下载windows python 安装包 2、双击运行安装&#xff08;强力建议自定义安装&#xff0c;勾选pip&#…

Hive11_Rank函数

Rank 1&#xff09;函数说明 RANK() 排序相同时会重复&#xff0c;总数不会变 DENSE_RANK() 排序相同时会重复&#xff0c;总数会减少 ROW_NUMBER() 会根据顺序计算 2&#xff09;数据准备 3&#xff09;需求 计算每门学科成绩排名。 4&#xff09;创建本地 score.txt&…

vue3.0vue2.0-prop

注:本篇涉及到的知识点&#xff0c;组合式<script setup>模式以及vue2.0和vue3.0选项式&#xff0c;组合式中非<script setup>模式&#xff0c;使用比较少&#xff0c;不再讲解&#xff0c;可自行看官网 目录 一、vue3.0组合式 1、vue3.0组合式prop传值: 父组件…

【ZYNQ实验】第一篇、ZYNQ驱动HDMI显示图片

目录 第一部分、实验说明 1、点名过来看 2、实验说明 2.1、涉及到的知识 2.2、使用的硬件 3、测试效果 3.1、实验一效果 3.2、实验二效果 4、写在前面 5、参考文献 第二部分、硬件搭建 第三部分、实现方法 1、实验一 1.1、实验一原理图 1.2、MATLAB图片转换代码…

Rosalind 039 Expected Number of Restriction Sites

这个问题结合了分子生物学中的限制性酶&#xff08;restriction enzymes&#xff09;的概念和概率统计学的应用。 生物背景&#xff1a; 限制性酶&#xff1a;细菌使用这些酶来切割病毒DNA的双链&#xff0c;从而使病毒失去功能。这些酶在病毒DNA上切割的位置被称为限制位点。…

适合 C++ 新手学习的开源项目——在 GitHub 学编程

作者&#xff1a;HelloGitHub-小鱼干 俗话说&#xff1a;万事开头难&#xff0c;学习编程也是一样。在 HelloGitHub 的群里&#xff0c;经常遇到有小伙伴询问编程语言如何入门方面的问题&#xff0c;如&#xff1a; 我要学习某一门编程语言&#xff0c;有什么开源项目可以推荐…

nginx下upstream模块详解

目录 一&#xff1a;介绍 二&#xff1a;特性介绍 一&#xff1a;介绍 Nginx的upstream模块用于定义后端服务器组&#xff0c;以及与这些服务器进行通信的方式。它是Nginx负载均衡功能的核心部分&#xff0c;允许将请求转发到多个后端服务器&#xff0c;并平衡负载。 在upst…

RA8900CE汽车用c总线接口实时时钟模块

汽车用c总线接口实时时钟模块内置调频32.768 kHz晶体单元和DTCXO&#xff0c;高稳定性和电源切换。 接口类型我 2C-Bus接口(400kHz)界面电压范围2.5V ~ 5.5V温度补偿电压范围2.0V至5.5V计时电压范围1.6V ~ 5.5V可选时钟输出(32.768 kHz, 1024 Hz, 1 Hz)各种功能齐全的日历、报…

如何配置Zabbix告警邮件通知并基于GPT提供解决方案?

一、概述 时间来到2023年末&#xff0c;距离Open AI发布GPT-3.5&#xff0c;首次向公众推出ChatGPT已经整整过去了一年。如今&#xff0c;以ChatGPT为代表的人工智能模型已然被应用众多领域&#xff0c;当然也包括IT运维。在IT运维中&#xff0c;通过对接运维监控平台&#xff…

windows机器上安装mysql

0、mysql下载地址 1、参考文章 2、把Data数据目录迁移到其他盘 2.0 首先停止mysql&#xff08;任务管理器-详细信息-随便找个进程右击进入转入服务&#xff0c;找到MySQL服务&#xff0c;点击停止&#xff09; 2.1 windows的 mysql默认的data目录在C:\ProgramData\MySQL\MySQ…

深度神经网络中的混合精度训练

Mixed-Precision Training of Deep Neural Networks | NVIDIA Technical Blog 目录 混合精度成功训练的技术 FP32 累加 损失缩放 loss scaling FP32 Master Copy of Weights 混合精度训练迭代过程 AMP混合精度训练介绍 FP16和FP32的区别 FP16的优势 FP16的问题 解决P…

多线程基础入门【Linux之旅】——上篇【线程控制,线程互斥,线程安全】

目录 前文 回望页表 一&#xff0c;什么是线程 二&#xff0c;使用 pthread_create &#xff08;线程创建&#xff09; 三&#xff0c;线程控制 1 &#xff0c;线程共享进程数据&#xff0c;但也拥有自己的一部分数据: 2&#xff0c; 线程 VS 进程优点 3&#xff0c;…

在前端利用Broadcast Channel实现浏览器跨 Tab 窗口通信的方法

Broadcast Channel 在前端&#xff0c;我们经常会用postMessage来实现页面间的通信&#xff0c;但这种方式更像是点对点的通信。对于一些需要广播&#xff08;让所有页面知道&#xff09;的消息&#xff0c;用postMessage不是非常自然。Broadcast Channel 就是用来弥补这个缺陷…

DVenom:一款功能强大的Shellcode加密封装和加载工具

关于DVenom DVenom是一款功能强大的Shellcode加密封装和加载工具&#xff0c;该工具专为红队研究人员设计&#xff0c;可以帮助红队成员通过对Shellcode执行加密封装和加载实现反病毒产品的安全检测绕过。 功能介绍 1、支持绕过某些热门反病毒产品&#xff1b; 2、提供了多种…

vue中的$nextTick的作用及使用场景

文章目录 一、$nextTick的作用二、特点和用途三、使用场景&#xff1a;1、在 Vue 组件内部使用&#xff1a;2、在普通 JavaScript 代码中使用&#xff1a; 三、注意事项 一、$nextTick的作用 $nextTick() 是 Vue 提供的一个异步方法&#xff0c;用于在 DOM 更新之后执行回调函…

【React系列】react-router

本文来自#React系列教程&#xff1a;https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. 认识react-router 1.2. 前端路由原理 前端路由是如何做到URL和内容进行映射呢&#xff1f;监听URL的改变。 UR…

新视野英语课本复盘1

the triumpth of years of hard work 多年的辛勤付出的胜利 get by on very little sleep 靠很少的睡眠勉强维持生活或工作 pursue new passions 追求新的热爱之事 reap the benefits of this opportunity 收获这个机会带来的益处 you will not only emerge as a more broadly …

目标检测YOLO实战应用案例100讲-基于红外图像处理的无人机光伏组件故障检测(续)

目录 3.2 自适应温度阈值故障检测算法设计 3.3 基于拟合灰度曲线的故障检测方案设计