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元素