一、在类组件中使用ref
React提供的这个ref属性(不能在无状态组件上使用 ref 属性,因为它们没有实例 ref属性是需要有组件实例才能使用**)表示为对组件真正实例的引用其实就是ReactDOM.render()返回的组件实例
ref 返回是真实的dom节点
方式1 字符串方式 (当前方式在React官方已经不推荐使用 后续内容已经废弃了这种写法 )
使用ref属性 标识组件 在使用this.refs.xxx 获取真实dom节点
<!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>Document</title>
<script src="react.16.8.6.js"></script>
<script src="react-dom.16.8.6.js"></script>
<script src="babel.min.js"></script>
<!-- 引用prop-types库 -->
<script src="./prop-types.js"></script>
</head>
<body>
<div id="demoDiv"></div>
<script type="text/babel">
class Com extends React.Component{
fun=()=>{
// 获取ref绑定的dom元素
console.log(this.refs.demoInput.value)
}
render(){
return (
<div>
{/*设置ref绑定dom元素*/}
<input type="text" ref="demoInput"/>
<button onClick={this.fun}>点我得到输入框的值</button>
</div>
)
}
}
ReactDOM.render(<Com/>,document.getElementById("demoDiv"))
</script>
</body>
</html>
方式2 回调函数方式
回调函数就是在dom节点或组件上挂载回调函数,函数的入参是dom节点,达到的效果与字符串形式是一样的,都是获取其引用。
<!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>Document</title>
<script src="react.16.8.6.js"></script>
<script src="react-dom.16.8.6.js"></script>
<script src="babel.min.js"></script>
<!-- 引用prop-types库 -->
<script src="./prop-types.js"></script>
</head>
<body>
<div id="demoDiv"></div>
<script type="text/babel">
class Com extends React.Component{
fun=()=>{
// 获取ref绑定的dom元素
console.log(this.inputDom.value)
}
render(){
return (
<div>
{/*设置ref绑定dom元素*/}
<input type="text" ref={(demo)=>{this.inputDom=demo}}/>
<button onClick={this.fun}>点我得到输入框的值</button>
</div>
)
}
}
ReactDOM.render(<Com/>,document.getElementById("demoDiv"))
</script>
</body>
</html>
方式3 createRef方式
React.createRef() 当被调用的时候会返回一个可以存储ref标识的dom 的一个容器
<!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>Document</title>
<script src="react.16.8.6.js"></script>
<script src="react-dom.16.8.6.js"></script>
<script src="babel.min.js"></script>
<!-- 引用prop-types库 -->
<script src="./prop-types.js"></script>
</head>
<body>
<div id="demoDiv"></div>
<script type="text/babel">
class Com extends React.Component{
// 1.创建出用来存储refdom的容器
// React.createRef() 当被调用的时候会返回一个可以存储ref标识的dom 的一个容器
myRef=React.createRef()
fun=()=>{
// 3.使用
console.log(this.myRef.current.value)
}
render(){
return (
<div>
{/*2.绑定*/}
<input type="text" ref={this.myRef}/>
<button onClick={this.fun}>点我得到输入框的值</button>
</div>
)
}
}
ReactDOM.render(<Com/>,document.getElementById("demoDiv"))
</script>
</body>
</html>
二、在函数组件使用ref
函数组件默认不能使用ref 所以我们需要使用react16.8新增的HOOK中的useRef帮助我们使用ref
useRef就是可以让函数组件使用ref的一个技术
import {useRef} from "react"
let Funcom=()=>{
// 1.创建出useRef
let xiaoming=useRef(null)
let fun=()=>{
// 3.获取
console.log(xiaoming.current.value);
}
return (
<div>
{/* 2.绑定使用 */}
<input type="text" ref={xiaoming}/>
<button onClick={fun}>点我得到输入框的值</button>
</div>
)
}
export default Funcom