1.通过回调Refs获取dom
需要在想被获取的元素上设置属性ref
- ref 可以是回调函数
import React from 'react';
export default class RefApp extends React.Component{
constructor(props){
super(props);
this.copy= this.copy.bind(this);
this.input = null;
}
//对文本内容进行复制
copy(){
this.input.select();
document.execCommand("copy");
}
render(){
return (
<div>
{/* 一、ref可以是回调函数,此时参数e即为该dom元素本身,将它绑定到对象属性input中 */}
<input ref={e=>this.input=e} type="text" ></input>
<button onClick={this.copy} >点击复制内容</button>
</div>
)
}
}
- ref 为字符串,可以通过
this.refs.ref值
来获取元素
copy(){
console.log(this.refs);
this.refs.inputEle.select();
document.execCommand("copy");
}
render(){
return (
<div>
{/* 二、ref为字符串,通过组件对象下的refs属性获取 */}
<input ref="inputEle" type="text" ></input>
<button onClick={this.copy} >点击复制内容</button>
</div>
)
}
2.React.createRef()
该方法返回一个ref 对象, 通过ref
属性绑定该对象,该对象下的current
属性就指向了绑定的元素或组件对象
import React from 'react';
export default class RefApp extends React.Component{
constructor(props){
super(props);
this.input = React.createRef();
this.copy= this.copy.bind(this);
}
//对文本内容进行复制
copy(){
console.log(this.input)
this.input.current.select();
document.execCommand("copy");
}
render(){
return (
<div>
<input ref={this.input} type="text" ></input>
<button onClick={this.copy} >点击复制内容</button>
</div>
)
}
}