react中ref获取dom或者组件方法
使用ref获取DOM的引用
在vue中，如果想获取DOM元素时，可以使用this.$refs.引用名称
在react中也可以像vue中，有类似的写法，如下
为元素添加ref引用
<h2 ref="test">这是h2标签</h2>在页面上获取元素
this.refs.test使用ref获取组件的引用
为组件添加ref引用
<Text ref="hellow"/>在页面上使用组件的引用
this.refs.hellow注意点： 只要使用ref拿到组件的引用对象，它就是组件的实例对象，因此就可以调用这个组件的方法，或者它的属性
react中的三种ref获取DOM节点
第一种 ref字符串方式获取Dom节点方式
已废弃的原始方法
class Dom extends React.Component{
showInputDom = () =>{
const {userNameInput} = this.refs
console.log(userNameInput);
}
render(){
return (
<div>
<input ref="userNameInput" type="text"/>
<button onClick={this.showInputDom}>点击显示inpuDom</button>
</div>
)
}
}
ReactDOM.render(<Dom/>,document.getElementById('root'))第二种 回调式获取Dom节点方式
开发常用
class Dom extends React.Component{
showInputDom = () =>{
const {userNameInput} = this
console.log(userNameInput);
}
render(){
return (
<div>
{}
{}
<input ref={(c)=>{this.userNameInput = c}} type="text"/>
<button onClick={this.showInputDom}>点击显示inpuDom</button>
</div>
)
}
}
ReactDOM.render(<Dom/>,document.getElementById('root'))第三种 回调式获取Dom节点方式 挂在到自身实例
class Dom extends React.Component{
// 挂载到了自身实例上了
userNameInput= (c) =>{
this.input1 = c ;
console.log(c);
}
render(){
return (
<div>
{}
{}
{}
{}
<input ref={this.userNameInput} type="text"/>
<button onClick={this.showInputDom}>点击显示inpuDom</button>
</div>
)
}
}
ReactDOM.render(<Dom/>,document.getElementById('root'))总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
