ref 的基础使用

import React from "react";
import ReactDOM from "react-dom";

/* 非受控组件（ref的使用） */

class Dom extends React.Component {
  /* 创建 ref, */
  constructor() {
    super()
    this.txtRef = React.createRef()
    this.boxRef = React.createRef()
  }
  getTex = () => {
    console.log(this.txtRef.current.value);
    console.log(this.txtRef.current);
  }
  getBox = () => {
    console.log(this.boxRef.current, 'box');
    console.dir(this.boxRef.current, 'box');
  }
  render() {
    return <>
      {/* 文本框 */}
      <input type="text" name='我' ref={this.txtRef}></input>
      <button onClick={this.getTex}>获取文本框的值</button>
      <div ref={this.boxRef}>无敌的我</div>
      <button onClick={this.getBox}>获取Box盒子</button>
    </>
  }
}

const App = <>
  <Dom />
</>

ReactDOM.render(App, document.getElementById('root'))
****