React 中 refs 的作用是什么?
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 的作用是什么?的更多相关文章
- vue中:key 和react 中key={} 的作用,以及ref的特性?
vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...
- React 中 keys 的作用是什么?
Keys 是 React 用于追踪哪些列表中元素被修改.被添加或者被移除的辅助标识. render () { return ( <ul> {this.state.todoItems.map ...
- React中refs持久化
根据使用React的版本,选择合适的方法. 字符串模式 :废弃不建议使用 回调函数,React版本 < 16.3 React.createRef() :React版本 >= 16.3 回调 ...
- React中Transition的作用
/** * `Transaction` creates a black box that is able to wrap any method such that * certain invarian ...
- 【react】---react中key值的作用
一.React中key值得作用 react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的,而是给React自己使用,有了key属性后,就可以与组件建立了一种对应关系,简单说,react利 ...
- react中内联样式的z-index不起作用.
<div style={{z-index: -100}} > hello,money. </div> 以上z-index样式如上写法是不起作用,原因是在react中内联样式的写 ...
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
- react中这些细节你注意过没有?
react中的一些细节知识点: 1.组件中get的使用(作为类的getter) ES6知识:class类也有自己的getter和setter,写法如下: Class Component { const ...
- React中ref的使用方法
React中ref的使用方法 在react典型的数据流中,props传递是父子组件交互的唯一方式:通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信.当然,就像reac ...
随机推荐
- echarts-迁徙图地点图标颜色修改
引用:https://gallery.echartsjs.com/editor.html?c=xLSy9AUmlA var uploadedDataURL = "/asset/get/s/d ...
- 基于 docker容器搭建机器学习环境
下载docker镜像 docker pull ubuntu:18.04 进入ubuntu系统命令 docker run -ti ubuntu /bin/bash 正确退出系统方式 先按,ctrl+p ...
- 基于Zabbix 3.2.6版本的Discovery
作用:用于发现某IP网段内存活并且满足一定条件的主机,发现后进行加入到zabbix server进行监控. 操作步骤: 创建[自动发现规则] 为新建的自动发现规则创建[Action] 操作步骤图文 ...
- 仿造email后缀自动添加功能(1)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 韦东山嵌入式Linux学习笔记01--转载: 板子ping不通PC怎么办
请参考链接:https://blog.csdn.net/u013490896/article/details/71250060 我的环境: window 10 jz2440 v3 我采用的连接方式如下 ...
- HQL实现模糊查询
hibernate 实现模糊查询两种传参方式,其实各个方法的实质都是一样的,只不过传递参数的方法稍微有点区别 public List<User> getUsers(String id){ ...
- 你在和脚本谈恋爱(自动化在IM聊天中的应用)
谢谢打开这篇文章的每个你 测开之分层自动化(Python)招生简章 Python自动化测试报告美化 在python中进行数据驱动测试 太嚣张了!他竟用Python绕过了“验证码” 在网络世界里你不知道 ...
- .htaccess防盗链方法(文件、图片)
http标准协议中有专门的字段记录referer,一来可以追溯上一个入站地址是什么,二来对于资源文件,可以跟踪到包含显示他的网页地址是什么. 因此所有防盗链方法都是基于这个Referer字段两种方法: ...
- PM、RD、QA、OP、CM、EPG 英文缩写是什么意思?
1.PM: Product Manager,产品经理,又称品牌经理.举凡产品从创意到上市,所有相关的研发.调研.生产.编预算.广告.促销活动等等,都由产品经理掌控. 2.RD: Research an ...
- 微信小程序data数组push和remove问题
因为在做一个小程序的demo时.由于不向后台请求数据,所以就涉及到对本地数据的操作,现在就做一些数组的增删 //添加新元素 addItemFn: function () { var { lists } ...