react的ref三种用法

第一种字符串的ref
ref=“myRef” 里面的绑定是字符串的绑定用法，这种ref的形式写多了影响效率问题，官方文档已经不推荐此写法

//创建类式组件class Demo extends React.Component {//点击按钮showData = () => {const { input1 } = this.refs;alert(input1.value);};showData2 = () => {const { input2 } = this.refs;alert(input2.value);};render() {return (<div><input type="text" ref="input1" placeholder="点击按钮提示数据" /><button onClick={this.showData}>点我提示左侧的数据</button><inputtype="text"ref="input2"onBlur={this.showData2}placeholder="失去焦点提示数据"/></div>);}}

第二种回调形式的ref的用法

  //创建类式组件class Demo extends React.Component {//点击按钮showData = () => {const { input1 } = this;alert(input1.value);};showData2 = () => {const { input2 } = this;alert(input2.value);};render() {return (<div><inputtype="text"ref={(c) => (this.input1 = c)}placeholder="点击按钮提示数据"/><button onClick={this.showData}>点我提示左侧的数据</button><inputtype="text"ref={(c) => (this.input2 = c)}onBlur={this.showData2}placeholder="失去焦点提示数据"/></div>);}}**这种回调形式的写法也发现了问题 就是调用次数比较多
在点击更新组件的时候：
首先render函数先将原来的回调清空，赋值为null,然后才重新渲染 所以出现两次执行情况**虽然不影响使用，单如果想要达到最优的效果可以稍微改进一下写法：//创建类式组件class Demo extends React.Component {//点击按钮showData = () => {const { input1 } = this;alert(input1.value);};showData2 = () => {const { input2 } = this;alert(input2.value);};//回调形式的refinput2 = (c) => (this.input2 = c);render() {return (<div><inputtype="text"ref={(c) => (this.input1 = c)}placeholder="点击按钮提示数据"/><button onClick={this.showData}>点我提示左侧的数据</button><inputtype="text"// {ref={(c) => (this.input2 = c)}}  这种方式的话每次渲染都得重新生在更新的时候出现c返回null情况 虽然不影响使用 但也可以使用以下这种方式改进ref={this.input2}onBlur={this.showData2}placeholder="失去焦点提示数据"/></div>);}}

第三种 API（React.createdRef()）容器的ref的用法— 目前是官方推荐使用最新的方式

export default class App extends Component {
myRef = React.createRef()
//点击获取inut的数据
showData = () => {
console.log(this.myRef.current.value)
}
render() {return <div >< input type = "text" ref = {this.myRef}/> <button onClick = {this.showData} > 点击显示输入框的数据 < /button> < /div >}
}

react的ref三种用法相关推荐

react的ref三种使用方式，获取元素内容
react的ref三种使用方式,获取元素内容. 注意:应尽可能少的使用ref,优先使用state 1.字符串 refGetData1=()=>{alert("获取到的内容:" ...
vue中$refs的三种用法
我们都知道,在vue2中获取DOM元素,可以直接在元素上绑定ref属性,然后获取到DOM元素的属性值,这种方法在vue3 中仍然可以使用,但也会有一些问题.下面就介绍$refs的三种用法: 1.vue ...
using 的三种用法
using 有哪三种用法? 1)引入命名空间. 2)给命名空间或者类型起别名. 3)划定作用域.自动释放资源,使用该方法的类型必须实现了 System.IDisposable接口,当对象脱离作用域之后 ...
static的三种用法，定义静态变量，静态函数，静态代码块！
static的三种用法,定义静态变量,静态函数,静态代码块! 1.定义静态变量 class PersonStatic { //静态变量的特点 //1.静态变量无需生成对象就可被调用,可以使用类名和对象 ...
Vue——基本的代码结构和插值表达式、v-cloak||Vue指令之v-text和v-html||v-bind的三种用法||Vue指令之v-on
Vue的基本代码 <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
SQL、LINQ、Lambda 三种用法(转)
SQL.LINQ.Lambda 三种用法颜色注释: SQL LinqToSql Lambda QA 1. 查询Student表中的所有记录的Sname.Ssex和Class列. select sna ...
标准SQL的update语句三种用法
标准SQL的update语句三种用法一.环境: MySQL-5.0.41-win32 Windows XP professional 二.建立测试环境: DROP TABLE IF EXIS ...
C++容器的insert()函数有以下三种用法: 最终*it=val;
C++容器的insert()函数有以下三种用法: 最终*it=val; //用法1:在指定位置it前"插入"值为val的元素,返回指向这个元素的迭代器, iterator inse ...
微课系列（6）：Python关键字else的三种用法
技术要点:Python关键字else在选择结构.循环结构和异常处理结构中的三种用法. ----------相关阅读---------- 教学课件 1900页Python系列PPT分享一:基础知识(10 ...

react的ref三种用法

react的ref三种用法相关推荐

最新文章

热门文章