React基础—refs
1. refs
React
核心就在于虚拟DOM
,也就是在React
中不总是直接操作页面真实的DOM
元素,并且结合Diffing
算法,可以做到最小化页面重绘。最为直观的为:
在使用数组的
map
方法返回一个子元素的时候,通常需要指定一个key
值,而这个key
值就是用于diffing
算法的对比关键,这里不详细介绍,将在下小节进行简单介绍。
但有些时候不可避免的我们需要一种方法可以操作我们定义的元素标签,并作出对应的修改。在React
中提供了一种访问DOM
节点的方式,也就是这里的refs
。
在[官网](Refs and the DOM – React (docschina.org))中也给出了下面几种应用场景:
- 管理焦点,文本选择或媒体播放。
- 触发强制动画。
- 集成第三方
DOM
库。
下面来一个简单的案例来体验一下所说的场景。
class RefsExample extends Component {
handleSubmit = (event) => {
// 获取数据进行判断逻辑
let username = this.usernameRef.current.value
let password = this.passwordRef.current.value
if(!(username === '123' && password === '1')) {
event.preventDefault()
alert("信息不正确!")
}
}
constructor() {
super();
this.usernameRef = React.createRef()
this.passwordRef = React.createRef()
}
render() {
return (
<form action='' onSubmit={this.handleSubmit}>
用户名:<input ref={this.usernameRef} type='text'/><br/>
密 码:<input ref={this.passwordRef} type='password'/><br/>
<button>提交</button>
</form>
);
}
}
注意到,上面的代码中我们使用了React.createRef()
来创建一个ref
引用,继而可以直接使用这个引用来获取到用户输入的值。
事实上,在React
中提供了不止一种创建ref
引用的方式,一共可以分为三种,下面分别介绍。
2. refs的分类
2.1 字符串形式的ref
在官网文档中也标记了过时的API。它已过时并可能会在未来的版本被移除。在render
方法中使用字符串定义一个ref
:
other:<p ref='wenben'>文本</p>
然后在js
调用处处理:
console.log(this.refs.wenben)
值得注意的是,在webstrom
工具中已经标记了删除线:
2.2 回调函数方式的ref
标准叫法为称为“回调 refs”。它能助你更精细地控制何时 refs
被设置和解除。其实也就是在标签中使用ref
来传入一个回调函数,比如下面的案例:
class RefsExample extends Component {
handleSubmit = (event) => {
// 获取数据进行判断逻辑
let username = this.usernameRef.current.value
let passwd = this.userPassword.value
if (!(username === 'root' && passwd === '123')) {
event.preventDefault()
alert("信息不正确!")
}
}
constructor() {
super();
this.usernameRef = React.createRef()
}
// 获取焦点
focusTextInput = (element) => {
this.userPassword = element // 将当前元素的对象保存起来
}
render() {
return (
<form action='' onSubmit={this.handleSubmit}>
用户名:<input ref={this.usernameRef} type='text'/><br/>
密 码:<input ref={this.focusTextInput} type='password'/><br/>
<button>提交</button>
</form>
);
}
}
2.3 createRef
也即是这篇文章的开篇第一个案例,就不再重复介绍:
this.passwordRef = React.createRef()
3. 关于refs的说明
- 默认情况下,你不能在函数组件上使用
ref
属性,因为它们没有实例; - 如果要在函数组件中使用
ref
,你可以使用forwardRef
,或者可以将该组件转化为class
组件; ref
会在componentDidMount
或componentDidUpdate
生命周期钩子触发前更新;- 勿过度使用
Refs
;
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhffkjaa
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01