【React 全家桶】React组件（类式）实例对象的三大属性3-Refs
React组件（类式）实例对象的三大属性3-Refs
- 一、Refs 的理解
- 二、Refs 中三种获取DOM元素节点的方式
-
- 1、字符串形式的ref （之后可以会废弃）
- 2、回调形式的ref
- 3、createRef
一、Refs 的理解
Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。
类似于原生JS中通过 document 访问 DOM 节点。
二、Refs 中三种获取DOM元素节点的方式
1、字符串形式的ref （之后可以会废弃）
1）设置标签的 ref 属性为 string 类型
<input ref="input1" type="text" placeholder="点击按钮提示数据" />
2）在类中就可以通过this.refs.xxx获取元素节点
代码如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1_字符串形式的refs（之后可能会废弃）title>
<style>
button {
margin: 0 10px;
}
style>
head>
<body>
<div id="test">div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js">script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>
<script type="text/babel">
class Demo extends React.Component {
//展示左侧数据
showData = () => {
let { input1 } = this.refs;//这是真实dom
alert(input1.value)
}
//展示右侧输入框数据
showData1 = () => {
let { input2 } = this.refs;//这是真实dom
alert(input2.value)
}
render() {
return (
<div>
<input ref="input1" type="text" placeholder="点击按钮提示数据" />
<button onClick={this.showData}>点我提示左侧的数据</button>
<input onBlur={this.showData1} ref="input2" type="text" placeholder="失去焦点提示数据" />
</div>
)
}
}
ReactDOM.render(<Demo />, document.querySelector('#test'))
script>
body>
html>
2、回调形式的ref
1）设置标签的 ref 属性为 回调函数 的类型
<input ref={ele => this.input1 = ele} type="text" placeholder="点击按钮提示数据" />
2）在类中就可以通过this.xxx获取元素节点
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2_回调函数形式的refstitle>
<style>
button {
margin: 0 10px;
}
style>
head>
<body>
<div id="test">div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js">script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>
<script type="text/babel">
class Demo extends React.Component {
//展示左侧数据
showData = () => {
alert(this.input1.value)
}
//展示右侧输入框数据
showData1 = () => {
alert(this.input2.value)
}
render() {
return (
<div>
<input ref={ele => this.input1 = ele} type="text" placeholder="点击按钮提示数据" />
<button onClick={this.showData}>点我提示左侧的数据</button>
<input ref={ele => this.input2 = ele} onBlur={this.showData1} ref="input2" type="text" placeholder="失去焦点提示数据" />
</div>
)
}
}
ReactDOM.render(<Demo />, document.querySelector('#test'))
script>
body>
html>
回调函数形式的ref中存在执行次数的问题：
如果 ref 回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入参数 null，然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题，但是大多数情况下它是无关紧要的。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2_回调函数形式的refstitle>
<style>
button {
margin: 0 10px;
}
style>
head>
<body>
<div id="test">div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js">script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>
<script type="text/babel">
class Demo extends React.Component {
state = { isHot: true }
showData = () => {
alert(this.input1.value)
}
//ref如果是内敛函数，那该函数在页面更新过程中会执行两次
changeWeather = () => {
const { isHot } = this.state;
this.setState({ isHot: !isHot })
}
//class 的绑定函数
saveInput = (ele) => {
this.input2 = ele;
console.log('class',ele)
}
render() {
const { isHot } = this.state;
return (
<div>
<h2>今天天气：{isHot ? '炎热' : '凉爽'}</h2>
<input ref={(ele) => { this.input1 = ele; console.log('内联',ele) }} type="text" placeholder="点击按钮提示数据" />
<input ref={this.saveInput} type="text" placeholder="点击按钮提示数据" />
<button onClick={this.showData}>点我提示左侧的数据</button>
<button onClick={this.changeWeather}>切换天气</button>
</div>
)
}
}
ReactDOM.render(<Demo />, document.querySelector('#test'))
script>
body>
html>
3、createRef
React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点。
该容器“专人专用”，一个标签只对应一个容器，多个标签则需新建多个容器。
1）通过 React.createRef 创建容器
myRef = React.createRef();
2）标签内通过this.xxx给 ref 赋值
<input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />
代码如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>createReftitle>
<style>
button {
margin: 0 10px;
}
style>
head>
<body>
<div id="test">div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js">script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>
<script type="text/babel">
class Demo extends React.Component {
/*
React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点
该容器“专人专用”，一个标签只对应一个容器，多个标签则需新建多个容器
*/
myRef = React.createRef();
myRef1 = React.createRef();
//展示左侧数据
showData = () => {
alert(this.myRef.current.value)
}
//展示右侧输入框数据
showData1 = () => {
alert(this.myRef1.current.value)
}
render() {
return (
<div>
<input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />
<button onClick={this.showData}>点我提示左侧的数据</button>
<input ref={this.myRef1} onBlur={this.showData1} type="text" placeholder="失去焦点提示数据" />
</div>
)
}
}
ReactDOM.render(<Demo />, document.querySelector('#test'))
script>
body>
html>
三种方式中string的方式最简单，但是存在一些问题，不过继续使用也不会有太大问题。
以上就是React组件（类式）实例对象的三大属性3-Refs的内容，请大家关注《React 全家桶》专栏。
我会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享，一起进步，加油。