ref屬性獲取DOM元素


原生方法獲取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元素

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM