[JavaScript知识库] react的refs属性

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> react的refs属性 -> 正文阅读

[JavaScript知识库]react的refs属性

refs属性的意义是标识，相当于原生js中的id，可以通过this.refs.标识名来访问，获取到的是真实DOM
ref可以为：
string类型（不推荐，可能会出现问题）
回调函数类型：分为行内式和外部

class Demo extends React.Component{
            myRef = React.createRef()
            myRef1 = React.createRef()
            showData = ()=>{
                alert(this.myRef.current.value)
            }
            showData1 = ()=>{
                alert(this.myRef1.current.value)
            }

            render(){
                // React.createRef()调用后可返回一个容器，该容器可存储被ref所标识的节点，该容器专人专用
                return(
                    <div>
                        <input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>
                        <button onClick={this.showData}>点我提示左侧数据</button>
                        <input ref={this.myRef1} type="text" onBlur={this.showData1} placeholder="失去焦点提示数据"/>
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo a={1} b={2} />,document.getElementById('test'))