React/practise/17.非受控组价.jsx

import React from 'react'
import { createRef } from 'react'

class Input extends React.Component {
  // 这个实例属性是可以定义的，语义化即可
  // createRef() 调用后可以返回一个容器,该容器可以存储被 ref 所表示的节点 就是说 input 这个 DOM 放在了 myRef 这个属性上
  msgRef = createRef()

  getValue = () => {
    // current.value 是指当前的 value 值
    console.log(this.msgRef.current.value)
  }

  render() {
    return (
      <>
        {/* 通过 ref 属性获取 msgRef */}
        <input type="text" ref={this.msgRef} />
        <button onClick={this.getValue}>获取输入框的值</button>
      </>
    )
  }
}

function App() {
  return <Input></Input>
}

export default App