React获取DOM元素-ref属性
类组件
通过ref给元素做标记（react不推荐使用）
<div id="app"></div>
<script type="text/babel">
class App extends React.Component{
componentDidMount(){ //类似于vue中mounted
this.refs.textInput.focus()
}
render(){
console.log("render")
return (
<div>
<input ref="textInput"/>
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById("app"))
</script>
</body>
ref绑定-通过回调函数
通过回调函数方式绑定 给DOM元素添加个属性textInput
在钩子函数componentDidMount()进行调用
<body>
<div id="app"></div>
<script type="text/babel">
class App extends React.Component{
componentDidMount(){
this.textInput.focus()
}
render(){
return (
<div>
<input ref={el=>this.textInput=el}/>
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById("app"))
</script>
</body>
ref绑定createRef
创建一个ref的应用，在组件或者DOM元素上通过ref做标记，通过current属性获取到dom组件
<body>
<div id="app"></div>
<script type="text/babel">
class App extends React.Component{
constructor(){
super() //继承的时候，第一行必须要写super 目的就是用来调用父类的构造函数
this.myRef = React.createRef(); //01-创建了一个ref的引用
}
componentDidMount(){
//03 注意：使用current属性才可以获取到dom组件
this.myRef.current.focus()
}
render(){
return (
<div>
{/*02 需要在组件或者dom元素上通过ref做好标记*/}
<input ref={this.myRef}/>
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById("app"))
</script>
</body>
函数组件
函数组件内不能访问到this的
想要在函数式组件内获取dom元素，我们可以采用useRef这个hooks来去解决在函数式组件中给元素做标记的问题
<body>
<div id="app"></div>
<script type="text/babel">
const App = props=>{
//1. 通过useRef创建一个ref对象
const inputEl = React.useRef(null);
const onButtonClick = ()=>{
//3. 通过inputEl.current属性就可以获取到绑定的input dom元素了。
inputEl.current.focus()
}
return (
<div>
{/*2. 通过ref绑定dom或者组件*/}
<input ref={inputEl}/>
<button onClick={onButtonClick}>Focus the input</button>
</div>
)
}
ReactDOM.render(<App/>,document.getElementById("app"))
</script>
</body>
请用今天的努力，让明天没有遗憾。
来源：https://www.cnblogs.com/cupid10/p/13595551.html |
发表于 2020-9-1 12:54:00