【REACT中的ref】

import React, { Component,createRef } from 'react'
import ReactDOM from "react-dom";
export default class App extends Component {
  state = {
    value:''
  }
  myref1 = createRef();
  myref2 = null;
  render() {
    return (
      <div>
        <input className='input1' ref={this.myref1} value={this.state.value} onChange={(e) => {
          this.setState({value:e.target.value})
        }}/>
        <button onClick={() => {
          //组件input的dom对象
          console.log(this.myref1.current)
          //获取组件input中的value值
          console.log(this.myref1.current.value)

          //清空input
          this.setState({value:''})

        }}>点我1</button>

        <input className={['input1','input2'].join(' ')} ref={(el) => this.myref2 = el}/>
        <button onClick={() => {
          //input的dom对象
          console.log(this.myref2)
          //获取组件input中的value值
          console.log(this.myref2.value)
        }}>点我2</button>
      </div>
    )
  }
}

ReactDOM.render(
  // <React.StrictMode>
    <App/>
  // </React.StrictMode>
  ,document.getElementById('root'))