ref绑定dom的三种写法

1、字符串形式

这种字符出串写法因为效率不好，所以不推荐使用

语法
标签上使用ref="name" 进行绑定
方法中this.refs.name拿到dom

<input ref="input1" type="text" placeholder="点击按钮弹出内容" />
<button onClick={ this.showData }>按钮</button>
showData = () => {const { input1 } = this.refsalert(input1.value)
}

2、回调的形式

ref会自动执行回调函数，并注入一个参数currentNode（当前节点）
更新组件时，refs会执行两次，第一次传null，第二次传入参数dom元素（并不会影响正常开发）
原因是每次渲染时都会定义一个新的函数实例，所以React清空旧的ref并且设置新的。
通过将ref的回调函数定义成class的绑定函数方式可以避免这个问题

语法
标签上使用ref={c=>this.name=c}
方法中this.name拿到dom

//正常写法
<input ref={c =>  this.input1 = c } type="text" placeholder="点击按钮弹出内容" />
<button onClick={ this.showData }>按钮</button>
showData = () => {const { input1 } = thisalert(input1.value)
}

//解决执行两次的问题
<input ref={this.demo} type="text" placeholder="class绑定的函数" />
demo=(c)=> {console.log(c,'123123')
}

3、使用React.createRef

React.createRef调用后返回一个容器，该容器可以存储被ref所标识的节点，该容器只能给单个使用，重复的容器，会被覆盖

语法
标签上使用ref={this.name}
给实例添加属性input = React.createRef();

 <input ref={this.input} type="text" placeholder="点击按钮弹出内容" /><button onClick={ this.showData }>按钮</button>showData = () => {alert(this.input.current.value)}

ref绑定dom的三种写法相关推荐

java c 事件对比_javacsript绑定事件的三种方式与各自特点
javacsript绑定事件的三种方式与各自特点 javacsript绑定事件的三种方式与各自特点点击打开链接 javacsript绑定事件的三种方式与各自特点 feipeng8848 2017-0 ...
React绑定this的三种方式
转载自 React绑定this的三种方式 React可以使用React.createClass.ES6 classes.纯函数3种方式构建组件.使用React.createClass会自动绑定每个方 ...
CSS伪类的三种写法
今天逛蓝色时,无意发现了有人讨论伪类的正确写法,让我对伪类的认识也更清晰了,转贴于此,以备日后查询(原贴当时没记下地址,已经记不得了) Code <style> a.tb{text-dec ...
Promise的链式调用三种写法，Promise.all与式调用
Promise的链式调用三种写法: // 1,Promise原始链式调用 new Promise((resolve, reject) => {setTimeout(() => {conso ...
android 闪屏页处理_Android应用闪屏页延迟跳转的三种写法
闪屏页也称之为欢迎页.在打开一个App时,我们第一眼看到的往往是一个闪屏页面,之所以叫闪屏页,是因为它出现之后会短暂地停留几秒钟再跳转到其他页面.闪屏页除了使用户体验更好外,还能给app留出初始化数据 ...
vue2.0模板的三种写法
vue2.0中的模板有三种写法,根据不同的需求运用不同的方法来实现 1. <!DOCTYPE html> <html lang="en"> <head ...
JavaScript的三种写法
1.2-JavaScript的三种写法 1-复习CSS代码的三种写法 1.外联样式:写在css文件中,使用link导入 <link rel="stylesheet" href ...
SpringMVC框架|Handler处理器的三种写法
文章目录一.SpringMVC中的处理器 1.SpringMVC开发方式 2.Servlet原生开发方式 3.开发中常用的方式一.SpringMVC中的处理器配置完SpringMVC的处理器映射 ...
JS面向对象的三种写法
欢迎来我的博客交流 /*面向对象的三种写法 *1.构造函数 *2.class类 * 2.直接操作对象 * */ /**/function myShow(name){this.name = name;t ...

ref绑定dom的三种写法

1、字符串形式

2、回调的形式

3、使用React.createRef

ref绑定dom的三种写法相关推荐

最新文章

热门文章