学习两个ref在React中的演示示例

为了摆脱繁琐的Dom操作，React提倡组件化，用数据驱动组件内部的视图，实现各种复杂的业务逻辑。然而，当我们为原始Dom绑定事件时，我们需要通过组件获取原始Dom，React也为我们提供了ref来解决这个问题。

为什么不能直接从组件中获取Dom？

组件不是真实的DOM节点，而是内存中存在的数据结构，称为DOM(虚拟DOM)。只有当它被插入到文档中时，它才会成为一个真正的DOM

如果需要从组件中获取真实DOM的节点，就需要使用官方的ref属性

使用场景

当用户加载页面时，默认焦点在输入框上

从“反应”导入反应{组件}；“进口”。/app . CSS '；//React组件精准抓取演示类app扩展组件{构造器(道具){super(道具)这个。state={showtxt :''}此。inputref=react。create ref()；}//为输入{ this . input ref . current . addevent listener(' keydown '，(event)={ this }绑定事件组件idmount()。setstate ({showtxt:event。键})})//默认焦点输入输入框这个。输入。current . focus()} render(){ return(div类名=' app ' input ref={ this . input ref }/p当前输入为： span { this . state . show txt }/span/p/div)；} }导出默认App自动对焦输入动画演示

使用场景

为了更好地显示用户输入的银行卡号，需要每四位数加一个空格

实施思路：

当用户输入的字符数可以被5整除时，就会增加一个额外的空格

当用户删除一个数字时，他遇到一个空格，两个字符(一个空格和一个数字)应该被删除。

为了实现上述思想，我们必须得到键盘的BackSpace事件，重写删除的逻辑

限于数字，每四位数加空格

从“反应”导入反应{组件}；“进口”。/app . CSS '；//React组件精准抓取演示类app扩展组件{构造器(道具){super(道具)这个。state={showtxt :''}此。inputref=react。create ref()；this . changeshowtxtt=this . changeshowtxtt . bind(this)；}//为输入{ this . input ref . current . addevent listener(' keydown '，(event)={ this . changeshowtxt(event)绑定事件组件idmount()；});//默认焦点输入框这个。input ref . current . focus()}//处理键盘事件changeShowTxt(事件){ //if(事件。key===' backspace ')当输入delete键时{//如果以空格结尾，两个字符if (this。state . show txt . end swith(“”){ this . setstate({ show txt : This . state . show txt . substring(0，This。state . show txt . length-2)})//通常删除一个字符} else { this . setstate({ show txt : This . state . show txt . substring(0，This。国家。showtxt。length-1)}}}//If (['0 '，' 1 '，' 2 '，' 3 '，' 4 '，' 5 '，' 6 '，' 7 '，' 8 '，' 9']。包含然后添加一个空格如果((这。state . show txt . length 1)% 5===0){ this。setstate ({showtxt : this。state.showtxt''})}这。setstate ({showtxt:this。国家。showtxtevent。key})} render () {return (div类名=' app' p银行卡号为demod/p inputref={this。inputref}值={this。国家。show txt }//div)；} }导出默认App摘要：

虽然虚拟DOM可以提高网页的性能，但是虚拟Dom无法得到用户的输入。为了得到文本输入框的一些操作，最好使用js的原生事件绑定机制~

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。