react中ref获取dom或者组件的实现方法（react 获取url参数）这样也行？

🌐 经济型：买域名、轻量云服务器、用途：游戏网站等《腾讯云》特点：特价机便宜适合初学者用点我优惠购买

🚀 拓展型：买域名、轻量云服务器、用途：游戏网站等《阿里云》特点：中档服务器便宜域名备案事多点我优惠购买

🛡️ 稳定型：买域名、轻量云服务器、用途：游戏网站等《西部数码》特点：比上两家略贵但是稳定性超好事也少点我优惠购买

文章摘要

这篇文章介绍了在React中使用`ref`获取DOM节点或组件引用的方法，以及如何在组件中操作DOM节点。文章分为以下主要内容： 1. **获取DOM节点的三种方式**： - **字符串方式**：通过`ref`传递字符串，获取DOM节点引用。 - **回调式方式**：通过`ref`绑定回调函数，获取DOM节点引用。 - **组件引用挂载方式**：将组件引用挂载在自身实例上，方便操作。 2. **获取组件引用的方法**： - 只要使用`ref`获取组件引用，组件引用就是组件的实例对象，可以调用组件方法或属性。 3. **示例代码**： - 代码展示了如何为元素和组件添加`ref`引用，以及如何在页面或组件中获取引用。 - 包括了使用`ref`获取DOM节点、组件引用的示例，以及组件引用挂载在自身实例上的代码。 4. **总结**： - 文章总结了React中使用`ref`的常见方法和应用场景，强调了`ref`在操作DOM节点和组件中的重要性。文章通过实例代码和详细说明，帮助读者理解React中`ref`的使用方法及其应用场景。

目录react中ref获取dom或者组件方法使用ref获取DOM的引用使用ref获取组件的引用react中的三种ref获取DOM节点第一种 ref字符串方式获取Dom节点方式第二种回调式获取Dom节点方式第三种回调式获取Dom节点方式挂在到自身实例总结

在vue中，如果想获取DOM元素时，可以使用this.$refs.引用名称

在react中也可以像vue中，有类似的写法，如下

为元素添加ref引用

在页面上获取元素

this.refs.test

为组件添加ref引用

在页面上使用组件的引用

this.refs.hellow

注意点：只要使用ref拿到组件的引用对象，它就是组件的实例对象，因此就可以调用这个组件的方法，或者它的属性

已废弃的原始方法

? class Dom extends React.Component{
? ? showInputDom=()=>{
? ? ? const {userNameInput}=this.refs
? ? ? console.log(userNameInput);
? ? }
? ? render(){
? ? ? return (
? ? ? ? <div>
? ? ? ? ? <input ref=”userNameInput” type=”text”/>
? ? ? ? ? <button onClick={this.showInputDom}>点击显示inpuDom</button>
? ? ? ? </div>
? ? ? )
? ? }
? }
? ReactDOM.render(<Dom/>,document.getElementById(‘root’))

开发常用

?class Dom extends React.Component{
? ? showInputDom=()=>{
? ? ? const {userNameInput}=this
? ? ? console.log(userNameInput);
? ? }
? ? render(){
? ? ? return (
? ? ? ? <div>
? ? ? ? ? {}
? ? ? ? ? {}
? ? ? ? ? <input ref={(c)=>{this.userNameInput=c}} type=”text”/>
? ? ? ? ? <button onClick={this.showInputDom}>点击显示inpuDom</button>
? ? ? ? </div>
? ? ? )
? ? }
? }
? ReactDOM.render(<Dom/>,document.getElementById(‘root’))

? class Dom extends React.Component{
? ? // 挂载到了自身实例上了
? ? userNameInput=(c)=>{
? ? ? this.input1=c ;
? ? ? console.log(c);
? ? }
? ? render(){
? ? ? return (
? ? ? ? <div>
? ? ? ? ? {}
? ? ? ? ? {}
? ? ? ? ? {}
? ? ? ? ? {}
? ? ? ? ? <input ref={this.userNameInput} type=”text”/>
? ? ? ? ? <button onClick={this.showInputDom}>点击显示inpuDom</button>
? ? ? ? </div>
? ? ? )
? ? }
? }
? ReactDOM.render(<Dom/>,document.getElementById(‘root’))

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:详解React获取DOM和获取组件实例的方式React使用refs操作DOM方法详解react.js 获取真实的DOM节点实例(必看)如何深入理解React的ref 属性