Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。
我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄,该值会作为回调函数的第一个参数返回:

class CustomForm extends Component {
handleSubmit = () => {
console.log("Input Value: ", this.input.value)
}
render () {
return (
<form onSubmit={this.handleSubmit}>
<input
type='text'
ref={(input) => this.input = input} />
<button type='submit'>Submit</button>
</form>
)
}
}

上述代码中的 input 域包含了一个 ref 属性,该属性声明的回调函数会接收 input 对应的 DOM 元素,我们将其绑定到 this 指针以便在其他的类函数中使用。
另外值得一提的是,refs 并不是类组件的专属,函数式组件同样能够利用闭包暂存其值:

function CustomForm ({handleSubmit}) {
let inputElement
return (
<form onSubmit={() => handleSubmit(inputElement.value)}>
<input
type='text'
ref={(input) => inputElement = input} />
<button type='submit'>Submit</button>
</form>
)
}

.

React 中 refs 的作用是什么?的更多相关文章

  1. vue中:key 和react 中key={} 的作用,以及ref的特性?

    vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...

  2. React 中 keys 的作用是什么?

    Keys 是 React 用于追踪哪些列表中元素被修改.被添加或者被移除的辅助标识. render () { return ( <ul> {this.state.todoItems.map ...

  3. React中refs持久化

    根据使用React的版本,选择合适的方法. 字符串模式 :废弃不建议使用 回调函数,React版本 < 16.3 React.createRef() :React版本 >= 16.3 回调 ...

  4. React中Transition的作用

    /** * `Transaction` creates a black box that is able to wrap any method such that * certain invarian ...

  5. 【react】---react中key值的作用

    一.React中key值得作用 react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的,而是给React自己使用,有了key属性后,就可以与组件建立了一种对应关系,简单说,react利 ...

  6. react中内联样式的z-index不起作用.

    <div style={{z-index: -100}} > hello,money. </div> 以上z-index样式如上写法是不起作用,原因是在react中内联样式的写 ...

  7. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  8. react中这些细节你注意过没有?

    react中的一些细节知识点: 1.组件中get的使用(作为类的getter) ES6知识:class类也有自己的getter和setter,写法如下: Class Component { const ...

  9. React中ref的使用方法

    React中ref的使用方法 在react典型的数据流中,props传递是父子组件交互的唯一方式:通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信.当然,就像reac ...

随机推荐

  1. Linux cat命令详解(连接文件并打印到标准输出设备上)

    cat:连接文件并打印到标准输出设备上 一.命令格式: cat [-AbeEnstTuv] [--help] [--version] filename 二.参数说明: -n 或 --number:由 ...

  2. 多线程之实现Runnable接口及其优点

    多线程之实现Runnable接口: 1.创建一个Runnable接口的实现类 2.在实现类中重写Runnable接口的run方法 3.创建一个Runnable接口实现类的对象 4.创建Thread类对 ...

  3. chrome79开发者工具代码高亮失效的解决办法

    升级chrome最新版本后,存在开发者工具Sources内代码高亮失效的情况 解决办法: 1. 开发者工具面板右上角菜单->Setting->Preferences 2. 将Theme切换 ...

  4. vue-cli 4 安装与 新建项目 路由

    环境: windows: vue-cli: 编辑器: vsCode npm: #去nodejs网安装https://npm.taobao.org/mirrors/node/v12.12.0/node- ...

  5. p1364 医院设置 题解

    思路:floyd 很普通的思路. 先用floyd求出两个边之间的距离,然后乘以人数. 代码: #include<iostream> #include<cstring> usin ...

  6. poj3208 Apocalypse Someday[数位DP]

    数位中出现至少3个连续的'6'的数字(称魔鬼数),询问满足要求的排名k的数. 经典题型.采用试填法. 递推做法:预处理出$i$位数字中满足要求的数(下记为'魔鬼数').对每一位都从0到9试一遍,然而卡 ...

  7. GitHub : Hello World

    这个写的太好啦,让我也没啥可以写的啦:http://www.open-open.com/lib/view/open1454507333214.html

  8. 构建的Web应用界面还不够好看?DevExtreme v19.1全新主题来袭

    行业领先的.NET界面控件DevExpress 正式发布了v19.1版本,本文将主要介绍介绍DevExtremev19.1中的数据可视化和主题控件,其中主要包含图表注释.增强图例功能等.欢迎下载v19 ...

  9. 优秀.NET界面控件DevExpress v19.1.6全新来袭!新改进抢“鲜”看

    DevExpress Universal Subscription(又名DevExpress宇宙版或DXperience Universal Suite)是全球使用广泛的.NET用户界面控件套包,De ...

  10. thinkphp5权限仿制

    权限列表 流程 thinkphp5封装好的权限模块 RBAC还有auth and then .......管理员表,可以依据auth.php搭建所有的权限表