1. 认识refs
1.1 refs说明
- refs是React提供的一种访问DOM节点的方式
- DOM节点上使用ref属性主要有三种不同方式获取DOM元素
2. 获取DOM元素的使用
2.1 通过refs获取DOM元素
说明:
- 在DOM节点上使用ref属性, 属性值为自定义字符串
- 此时就可以通过组件实例对象的
refs属性获取所有的具有ref属性的DOM元素, - 属性refs的值是一个对象, 这个对象中的属性就是DOM节点上ref属性的值,属性值就是DOM元素
- 因此我们可以直接通过自定义的ref属性值获取DOM元素
示例代码如下:
class MyCom extends React.Component{
handleClick =() => {
console.log(this.refs);
/*
打印内容
{
myinput: input
节点上ref属性值: 对应DOM节点
}
*/
// 1. 获取DOM 节点的值
let value = this.refs.myinput.value;
// 2. 打印input标签中输入的内容
console.log(value);
}
render(){
return (
<div>
<input type="text" ref="myinput"/>
<button onClick={ this.handleClick }>点击打印input内容</button>
</div>
)
}
}
ReactDOM.render(<MyCom/>, document.getElementById("app"))
示例说明:
- 在需要获取的DOM元素上添加ref属性,自定义一个字符串的值来标记这个节点
- 当点击button按钮时,在事件处理函数中,通过组件实例对象
this的refs属性,以及节点标记获取元素 - 然后在通过
value获取节点的值,并答应
2.2 自定组件实例属性获取DOM元素
说明:
- DOM元素上ref属性的值除了是字符串还可以是一个函数
- 这个函数会接受一个参数,这个参数就还是当前的DOM节点
- 在函数中给组件实例对象自定义一个属性,并赋值这个DOM元素
- 此时就可以通过组件实例对象获取节点并获取值
实例代码:
class MyCom extends React.Component{
handleClick =() => {
console.log(this);
/*
打印内容
{
input: input
...
}
*/
// 1. 获取DOM 节点的值
let value = this.input.value;
// 2. 打印input标签中输入的内容
console.log(value);
}
render(){
return (
<div>
<input type="text" ref={(input) => this.input = input}/>
<button onClick={ this.handleClick }>点击打印input内容</button>
</div>
)
}
}
ReactDOM.render(<MyCom/>, document.getElementById("app"))
实例说明:
- 因为给input元素的ref赋值的是函数不是字符串,因为使用{}语法
- 在函数中通过形参input接受到传递过来的input DOM元素
- 并在函数中将这个DOM元素赋值给组件实例对象(this)的自定义属性
input - 因此在点击事件函数中打印的组件实例对象(this)中就有自定义属性
input值为inputDOM元素
2.3 通过React.createRef()API获取节点
说明:
- 在React 16.3 版本引入了
React.createRef()API, - 通过这个API,返回一个对象,这个对象,对象中有一个默认的
current属性,值为null - 此时你需要获取那个DOM元素,就可以将这个对象作为
ref属性的属性值 - 那么就可以通过这个对象的
current属性获取DOM元素
示例代码如下:
class MyCom extends React.Component{
// 给组件实例对象添加一个myInput属性
// 值为将要分配DOM节点的对象
myInput = React.createRef();
handleClick =() => {
console.log(this);
/*
打印内容
{
myInput:{current:input}
...
}
*/
// 1. 获取DOM 节点的值
let value = this.myInput.value;
// 2. 打印input标签中输入的内容
console.log(value);
}
render(){
return (
<div>
<input type="text" ref={this.myInput}/>
<button onClick={ this.handleClick }>点击打印input内容</button>
</div>
)
}
}
ReactDOM.render(<MyCom/>, document.getElementById("app"))
示例说明:
- 在组件中创建一个实例对象自定义属性
myInput, - 这个属性值是通过
React.createRef()API创建的用于分配DOM元素的对象 - 在需要获取的
input元素上添加ref属性,属性值,就是要分配的实例对象的自定义属性 - 此时就可以通过组件实例对象自定义属性
myInput的current属性获取到DOM元素
3. 获取子组件实例对象
说明:
- 上面所学的三种不同的获取DOM节点的方法,也可以用在组件上
- 在组件的子组件上也可以定义ref属性
- 通过ref获取子组件实例对象
- 在通过子组件的实例对象也可以调用子组件实例对象上的
示例代码:
// 子组件
class MySon extends React.Component{
// 组件MySon实例对象方法
run = () => {
console.log("子组件上的run方法");
}
render(){
return (
<div>
这是子组件
</div>
)
}
}
// 父组件
class MyCom extends React.Component{
myInput = React.createRef();
handleClick =() => {
console.log(this);
/*
打印内容
{
MySon: MySon
...
}
*/
// 1. 获取子组件实例对象
let {MySon} = this;
// 2.调用子组件实例对象上的run方法
MySon.run()
}
render(){
return (
<div>
{/* 在子组件上使用ref属性 */}
<MySon ref={(MySon) => this.MySon = MySon }/>
<button onClick={ this.handleClick }>点击打印input内容</button>
</div>
)
}
}
ReactDOM.render(<MyCom/>, document.getElementById("app"))
