原生方法獲取DOM(不推薦)
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1 id={'box'}>獲取DOM元素</h1>
<button onClick={() => this.btnClick()}>按鈕</button>
</div>
)
}
btnClick = () => {
let box = document.getElementById('box');
console.log(box);
}
}
export default App;
- 不推薦直接使用原生方式獲取DOM
使用 this.refs 獲取DOM(不推薦)
import React from 'react'; class App extends React.Component { constructor(props) { super(props); } render() { return ( <div> <h1 ref={'box'}>獲取DOM元素</h1> <button onClick={() => this.btnClick()}>按鈕</button> </div> ) } btnClick = () => { let box = this.refs.box; console.log(box); } } export default App;
- 不推薦,過時的方式獲取 DOM
使用React.createRef (推薦)
import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.box = React.createRef(); } render() { return ( <div> <h1 ref={this.box}>獲取DOM元素</h1> <button onClick={() => this.btnClick()}>按鈕</button> </div> ) } btnClick = () => { console.log(this.box.current); } } export default App;
- 推薦
- 使用 React.createRef() 創建一個對象,將該對象賦值給 DOM 元素的 ref 屬性,該對象的 current 就是該 DOM 對象
通過回調函數方式獲取DOM (推薦)
import React from 'react'; class App extends React.Component { constructor(props) { super(props); this.box = null } render() { return ( <div> <h1 ref={(ele) => this.box = ele}>獲取DOM元素</h1> <button onClick={() => this.btnClick()}>按鈕</button> </div> ) } btnClick = () => { console.log(this.box); } } export default App;
- 推薦
- 給 DOM 元素添加 ref 屬性,取值是一個函數,函數的第一個參數就是當前DOM元素