关于ref我们是怎么理解的呢?

我们可以通过React.createRef()创建一个 ref节点,并将其打印出来。

代码如下:

import React,{Component} from 'react'
import './MyRef.less'
class MyRef extends Component{
constructor(props){
super(props)
this.myRef=React.createRef()
console.log('this.myRef>>>',this.myRef) }
render(){
return(
<div ref={this.myRef}>
</div>
)
}
}
export default MyRef

查看控制台我们可以看到,我们的ref取到的其实就是一个html的dom节点,或者说react元素



如果我们想实现点击按钮,输入框聚焦和页面加载进来输入框聚焦又应该怎么做呢?

(一)当我点击按钮,想要input框聚焦,这个时候的话,就是我们点击的时候要取到这个输入框节点,并且让它聚焦



代码如下

import React,{Component} from 'react'
import './MyRef.less'
class MyRef extends Component{
constructor(props){
super(props)
this.textInput=React.createRef()
}
focusTextInput=()=>{
this.textInput.current.focus()
}
render(){
return(
<div>
<input
type="text"
ref={this.textInput}
/>
<input
type="button"
value="focus the text input"
onClick={this.focusTextInput}
/>
</div>
)
}
}
export default MyRef

(二)那如果我们想要输入框在页面加载就聚焦,我们应该怎么做呢?

React 会在组件加载时将 DOM 元素传入 current 属性,在卸载时则会改回 null。

ref 的更新会发生在componentDidMount 或 componentDidUpdate 生命周期钩子之前。

那这个时候就需要用到componentDidMount

textarea中的内容

<textarea
rows={4}
placeholder="请输入您的评论"
value={this.state.content}
onChange={this.handleContentChange}
className="ant-input"
ref={(textarea)=>this.textarea=textarea}
/>

通过ref直接取到这个textarea的dom对象,然后再进行聚焦

componentDidMount(){
this.textarea.focus()
}

by我还差远了,差的很远

ref实现输入框聚焦的更多相关文章

  1. jquery实现输入框聚焦,键盘上下键选择城市

    在最近有个项目中 需要实现当文本框聚焦的时候,可以键盘上下键选择内容,按enter键的时候,把内容传到输入框中,如图所示: 实现代码如下: /** *输入框聚焦,键盘上下键选择城市 */ ;(func ...

  2. vue中输入框聚焦,自动跳转下一个输入框

    比如 点击入库,el-dialog弹出来,然后自动聚焦第一个输入框,当输入框有值的时候,自动跳转下一个输入框 这个需求 直接上菜: this.$refs.lbj.focus()其实直接这么写也可以,但 ...

  3. 移动端项目在ios上输入框聚焦难解决方案

    由于引入fastclick导致ios端input.textarea输入框难以点击聚焦,解决方案如下: 找到项目中的fastclick依赖或在main.js中改写fastclick的focus实现.

  4. 怎样使用 CSS 清除 input 输入框聚焦选中时的蓝色边框?

     input 输入框的聚焦选中时的边框是由 outline 属性控制的, 直接使用: input { outline: none } 即可. 如下:

  5. [Phonegap+Sencha Touch] 移动开发24 包wp8.1的App,弹出软键盘输入框聚焦实施后,无移动采收率方法来解决接口

    这种现象不仅是现在显示phonegap包sencha touch的wp8.1该程序将出现(只wp8.1,wp8正常).其他js我测试了几个框架(app framework, jquery mobile ...

  6. [Phonegap+Sencha Touch] 移动开发24 打包wp8.1的App,执行时输入框聚焦弹出软键盘之后,界面上移而不恢复原位的解决的方法

    这个现象仅仅出如今phonegap打包sencha touch的wp8.1程序会出现(仅wp8.1,wp8正常),其他js框架我測试了几个(app framework, jquery mobile), ...

  7. 移动端 mui框架中input输入框或任何输入框聚焦后页面自动上移

    一.mui框架中点击input后,安卓手机弹出自带的输入键盘时,页面自动上移 实现方法: (1)只要把input标签放在mui-content这个类里面就可以了 <div class=" ...

  8. 【ios bug解决】 输入框聚焦时光标不显示

    解决办法:重写user-select样式 css:   user-select: text;-webkit-user-select:text;

  9. vue引用fastClick后,ios输入框聚焦不灵敏问题

    fastClick.prototype.focus = function (targetElement) {       targetElement.focus() }

随机推荐

  1. NTP系统时间同步-操作记录

    在初始化一台linux服务器后,发现这台服务器的时间不对[root@dev ~]# date2016年 10月 11日 星期二 07:04:34 CST Linux时钟分为系统时钟 (System C ...

  2. box-flex 弹性合布局+WebApp布局自适应

    问:随着屏幕改变,中间自适应 两边固定宽度? 参考: nec 布局 四种方法--博客园 问:左侧导航栏隐藏后,右侧内容宽度自动(响应式)变大? <!DOCTYPE html> <ht ...

  3. navicat有数据额结构同步

    这个功能可能检查两个库的表结构异同,进行表结构构同步,可以生成同步语句. 比如在测试环境表中新增了字段,可以通过这个工具进行表结构同步.

  4. hadoop伪分布式安装之Linux环境准备

    Hadoop伪分布式安装之Linux环境准备 一.软件版本 VMare Workstation Pro 14 CentOS 7 32/64位 二.实现Linux服务器联网功能 网络适配器双击选择VMn ...

  5. Beta阶段敏捷冲刺五

    一.举行站立式会议 1.当天站立式会议照片一张 2.团队成员报告 林楚虹 (1) 昨天已完成的工作:排行榜功能.完善从数据库读取单词放入缓存功能(即完善select.js) (2) 今天计划完成的工作 ...

  6. Resolve Missing artifact Issue in maven

    https://jingyan.baidu.com/article/d621e8da0a5b192864913f79.html

  7. MYSQL ROW_FORMAT=Compact

    https://dev.mysql.com/doc/refman/5.6/en/innodb-row-format-antelope.html https://docs.oracle.com/cd/E ...

  8. Oracle ORDS的简单SQL配置模板

    1. 先加上简单的SQL配置模板. DECLARE PRAGMA AUTONOMOUS_TRANSACTION; BEGIN ORDS.ENABLE_SCHEMA(p_enabled => TR ...

  9. SpringBoot(十六)_springboot整合JasperReport6.6.0

    现在项目上要求实现套打,结果公司里有个人建议用JaperReport进行实现,就进入这个东西的坑中.好歹经过挣扎现在已经脱离此坑中.现在我也是仅能实现读取数据库数据转成pdf进行展示,包括中文的展示. ...

  10. 【Spring】—— 自动装配

    一.Spring中装配bean的方式 1.在XML中显式配置 2.在Java中进行显式配置 3.隐士的bean发现机制和自动装配 二.自动装配示例 1.在需要装配到其他bean中的类中加入@Compo ...