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>