react ref三种使用方式，获取元素内容

受控组件
在react中,input标签的部分属性受到react控制,如onChange是基于input 和change 事件进行封装
非受控组件
对于没有经历过封装的一些属性或者方法,可以通过ref去获取这个dom元素,再去获取或触发其自身的属性和方法(这点的话和Vue是一样的)

react的ref三种使用方式，获取元素内容。
注意：应尽可能少的使用ref，优先使用state
1.字符串

refGetData1=()=>{
            alert("获取到的内容："+this.refs.div1.innerText);
        }
 <div ref='div1' onClick={this.refGetData1}>点我是ref字符串方式</div>

2.回调函数（推荐）

refGetData2=()=>{
            alert("获取到的内容："+this.refData2.innerText);
        }
<div ref={(ele)=>{this.refData2=ele}} onClick={this.refGetData2}>点我是回调函数的方式</div>

3.React.createRef() ，react16.3新增方法

constructor(props){
    super(props)
    this.refData3=React.createRef()  // react16.3扩展的新方法，原理是将值赋给变量，通过ref挂载在节点或组件上，使用ref的current属性拿到节点
}
refGetData3=()=>{
    alert("获取到的内容："+this.refData3.current.innerText);
}
<div ref={this.refData3} onClick={this.refGetData3}>点我通过React.createRef()获取我的内容，这是react16.3新增的方法，原理是将值赋给变量，通过ref挂载到节点或组件上，使用ref的current属性拿到节点</div>

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>

<body>
    <div id='test'></div>
    <script type='text/babel'>
        class Test extends React.Component{
            constructor(props){
                super(props)
                this.refData3=React.createRef()  // react16.3扩展的新方法，原理是将值赋给变量，通过ref挂载在节点或组件上，使用ref的current属性拿到节点
            }
        refGetData1=()=>{
            alert("获取到的内容："+this.refs.div1.innerText);
        }
        refGetData2=()=>{
            alert("获取到的内容："+this.refData2.innerText);
        }
        refGetData3=()=>{
            alert("获取到的内容："+this.refData3.current.innerText);
        }
        render(){
            return(
                <div>
                    <div ref='div1' onClick={this.refGetData1}>点我是ref字符串方式</div>
                    <div ref={(ele)=>{this.refData2=ele}} onClick={this.refGetData2}>点我是回调函数的方式</div>
                    <div ref={this.refData3} onClick={this.refGetData3}>点我通过React.createRef()获取我的内容，这是react16.3新增的方法，原理是将值赋给变量，通过ref挂载到节点或组件上，使用ref的current属性拿到节点</div>
                </div>
            )
        }
    }
    ReactDOM.render(<Test/> ,document.getElementById('test'))
    </script>
</body>

</html>

react ref三种使用方式，获取元素内容

小情绪

引用和评论

git 常用命令

vue3使用百度地图

Taro 源码揭秘：4. 每次 npm run dev:weapp 开发小程序，build 编译打包是如何实现的？

一文掌握vue3自定义指令

像编写文档一样轻松构建你的官网！-VitePress保姆级教程

为 SPA 应用实现一个升级提示组件（UpgradeNotification）

@tanstack/react-query 实践