[React] Use React ref to Get a Reference to Specific Components
When you are using React components you need to be able to access specific references to individual component instances. This is done by defining a ref
. This lesson will introduce us to some of the nuances when using ref
.
<input
ref="b"
type="text"
onChange={this.update.bind(this)}
/>
The way to refer to the 'ref':
this.refs.b.value
Also 'ref' is able to receive a callback function:
<Input
ref={ component => this.a = component}
update={this.update.bind(this)}
/> class Input extends React.Component {
render(){
return <div><input ref="input" type="text" onChange={this.props.update}/></div>
}
}
Now the way to access the ref value:
this.a.refs.input.value,
class App extends React.Component {
constructor(){
super();
this.state = {a: '', b: ''}
}
update(){
this.setState({
a: this.a.refs.input.value,
b: this.refs.b.value
})
}
render(){
return (
<div>
<Input
ref={ component => this.a = component}
update={this.update.bind(this)}
/> {this.state.a}
<hr />
<input
ref="b"
type="text"
onChange={this.update.bind(this)}
/> {this.state.b}
</div>
)
}
} class Input extends React.Component {
render(){
return <div><input ref="input" type="text" onChange={this.props.update}/></div>
}
} ReactDOM.render(
<App />,
document.getElementById('root')
);
[React] Use React ref to Get a Reference to Specific Components的更多相关文章
- React Native中ref的用法(通过组件的ref属性,来获取真实的组件)
ref是什么? ref是组件的特殊属性,组件被渲染后,指向组件的一个引用.可以通过组件的ref属性,来获取真实的组件.因为,组件并不是真正的DOM节点,而是存在于内存中的一种数据结构,称为虚拟的DOM ...
- 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定
接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...
- React组件proptypes, ref
一.使用props.children访问嵌套数据 import React from 'react'; class Button extends React.Component { render () ...
- react中的ref的3种方式
2020-03-31 react中的ref的3种方式 react中ref的3种绑定方式 方式1: string类型绑定 类似于vue中的ref绑定方式,可以通过this.refs.绑定的ref的名字获 ...
- JavaScript 和 React,React用了大量语法糖,让JS编写更方便。
https://reactjs.org/docs/higher-order-components.htmlhttps://codepen.io/gaearon/pen/WooRWa?editors=0 ...
- React的React.createRef()/forwardRef()源码解析(三)
1.refs三种使用用法 1.字符串 1.1 dom节点上使用 获取真实的dom节点 //使用步骤: 1. <input ref="stringRef" /> 2. t ...
- React Hooks & react forwardRef hooks & useReducer
React Hooks & react forwardref hooks & useReducer react how to call child component method i ...
- react之react Hooks
函数组件,没有 class 组件中的 componentDidMount.componentDidUpdate 等生命周期方法,也没有 State,但这些可以通过 React Hook 实现. Rea ...
- React学习笔记-1-什么是react,react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
随机推荐
- eclipse git冲突解决
1.工程->Team->同步: 2.从远程pull至本地,就会出现如下内容: 3.使用Merge Tool,执行第二项 4.再手动修改 4.修改后的文件需要添加到Git index中去: ...
- ListView Item 点击展开隐藏问题
public class ListAdapter extends BaseAdapter { private Context mContext; private View mLastV ...
- Android网络框架OkHttp之get请求(源码初识)
概括 OkHttp现在很火呀.于是上个星期就一直在学习OkHttp框架,虽然说起来已经有点晚上手了,貌似是2013年就推出了.但是现在它版本更加稳定了呀.这不,说着说着,OkHttp3.3版本在这几天 ...
- python3输出range序列
b=range(3) #输出的是[0, 1, 2] ,其实这里如果用在循环上,代表着循环多少次,这里是循环3次.从零开始.print(list(b))
- python内存增长问题
如果你的程序没有调用什么特殊的库, 只是用了很平常的库, 而且使再循环很多的情况下, 那么建议你把循环里的程序拆出来,写成一子函数,循环子函数. 如下面格式: for (循环) 子函数 这样程序每 ...
- 洛谷——P1096 Hanoi双塔问题
https://www.luogu.org/problem/show?pid=1096 题目描述 给定A.B.C三根足够长的细柱,在A柱上放有2n个中间有孔的圆盘,共有n个不同的尺寸,每个尺寸都有两个 ...
- Codeforces Beta Round #24 D. Broken robot (打表找规律)
题目链接: 点击我打开链接 题目大意: 给你 \(n,j\),再给出 \(m[0]\) 的坐标和\(a[0]-a[n-1]\) 的坐标. 让你输出 \(m[j]\) 的坐标,其中 \(m[i]\) 和 ...
- cmake配置c++可调用的文件路径参数
一.目的 在程序中使用一个路径配置,因为在svn服务器的测试数据,测试数据成为了本地路径,在程序中使用了绝对路径来处理文件的输入,这个令人头疼啊. 每次下完代码,我得挨个地方去找,谁在用本地路径,有点 ...
- C语言free函数的原理——————————【Badboy】
今天在网上看到了这样一个问题,"假设malloc 了一块字符串的内存.然后,它改变了这个字符串的大小,问会不会有一部分内存没有被释放掉."这个问题,曾经的确没有细致想过. 当然.我 ...
- struts2注入类
struts2是能够注入一个对象的,那么一定须要继承ModelDriven的泛型接口. package com.test.action; import com.opensymphony.xwork2. ...