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. Python爬虫之简单爬虫框架实现

    简单爬虫框架实现 目录 框架流程 调度器url管理器 网页下载器 网页解析器 数据处理器 具体演示效果 框架流程 调度器 #导入模块 import Url_Manager import parser_ ...

  2. 手把手教你查看网站遭受到的Web应用攻击类型

    常见Web应用攻击类型有:webshell.SQL注入.文件包含.CC攻击.XSS跨站脚本攻击.敏感文件访问.远程命令.恶意扫描.代码执行.恶意采集.特殊攻击.其他攻击十二种攻击类型. 如何查看网站遭 ...

  3. Linux下putenv()函数导致composer更新失败

    bug复现: 原因: putenv() 函数设置特定的环境变量有可能是一个潜在的安全漏洞,所以这个函数在php配置文件中是默认禁止的,在 php.ini 中查找此函数,然后将此函数删除掉,重载配置即可 ...

  4. vi 必须要学会的技能

    vi与vim vi编辑器是所有Unix及Linux系统下标准的编辑器,他就相当于windows系统中的记事本一样,它的强大不逊色于任何最新的文本编辑器.他是我们使用Linux系统不能缺少的工具.由于对 ...

  5. 使用sproxy.exe访问基于soap的webservice

    使用vc访问基于soap的webservice有多种方法,其中有一种是使用atlsoap,关于这个可以搜索sproxy.exe文章,不在这介绍(主要是我的写作能力太差).我写这个日记主要是项记录访问w ...

  6. 标准C语言(2)

    字符类型名称是char,这个类型里一共包含256个不同的整数,每个整数代表一个字符(例如'a', '&'等),这些整数和字符可以互相替代,ASCII码表记录了所有整数和字符之间的对应关系 'a ...

  7. linux PHP空间设置GZIP压缩网页方法!

    网站设置GZIP压缩,缩小网页体积,让网站访问速度更快!方法很简单,只需要在你的网站根目录建立.htaccess文件并输入以下代码: 新建-记事本-复制以下代码:(如果网站已有.htaccess文件, ...

  8. Codeforces Manthan, Codefest 18 (rated, Div. 1 + Div. 2) E.Trips

    比赛的时候想到怎么做了 没调出来(感觉自己是个睿智) 给你N个点M条边,这M条边是一条一条加进去的 要求你求出加入每一条边时图中极大'K度'子图的大小 极大'K度'子图的意思是 要求出一个有尽量多的点 ...

  9. django 自带认证系统(login,logout,authenticate,login_required)

    from django.contrib.auth import login,authenticate,logoutfrom django.contrib.auth.decorators import ...

  10. libusb读写

    https://blog.csdn.net/u012247418/article/details/83684980 https://github.com/crazybaoli/libusb-test ...