React獲取DOM元素-ref屬性
阿新 • • 發佈：2020-09-01
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>