react中ref的使用方式

最新推荐文章于 2023-12-06 11:23:25 发布

别放弃我还在努力

最新推荐文章于 2023-12-06 11:23:25 发布

阅读量2.1k

点赞数 1

分类专栏： react相关文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/oLylia/article/details/127010004

版权

react相关专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、在类组件中使用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