React获取DOM元素-ref属性
<h3 id="react获取dom元素-ref属性">React获取DOM元素-ref属性</h3><h4 id="类组件">类组件</h4>
<h5 id="通过ref给元素做标记react不推荐使用">通过ref给元素做标记（react不推荐使用）</h5>
<pre><code class="language-jsx">
<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>
</code></pre>
<h5 id="ref绑定-通过回调函数">ref绑定-通过回调函数</h5>
<p>通过回调函数方式绑定 给DOM元素添加个属性textInput</p>
<p>在钩子函数componentDidMount()进行调用</p>
<pre><code class="language-jsx"><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>
</code></pre>
<h5 id="ref绑定createref">ref绑定createRef</h5>
<blockquote>
<p>创建一个ref的应用，在组件或者DOM元素上通过ref做标记，通过current属性获取到dom组件</p>
</blockquote>
<pre><code class="language-jsx"><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>
</code></pre>
<h4 id="函数组件">函数组件</h4>
<blockquote>
<p>函数组件内不能访问到this的</p>
<p>想要在函数式组件内获取dom元素，我们可以采用useRef这个hooks来去解决在函数式组件中给元素做标记的问题</p>
</blockquote>
<pre><code class="language-jsx"><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>
</code></pre>
</div>
<div id="MySignature" role="contentinfo">
请用今天的努力，让明天没有遗憾。<br><br>
来源：https://www.cnblogs.com/cupid10/p/13595551.html
頁:
[1]