react表单组件

常用且推荐的方法

import React from "react";

class TestComponent extends React.Component{
  // 1.声明用来控制input value的react组件自己的状态
  state = {
    value: '输入框的值'
  }

  change = (e) => {
    console.log('输入框',e)
    // 4.拿到输入框最新的值 赋值给state中的value
    this.setState({
      value: e.target.value
    })
  }

  render() {
    return(
      // 2.给input的value值绑定属性 react state
      // 3.给input绑定一个change事件 为了拿到当前输入框中的数据
      <div>
        <input type="text" value={this.state.value} onChange={this.change}/>
      </div>
    )
  }
}

function App() {
  return (
    <div className="App">
      <TestComponent/>
    </div>
  );
}

export default App;

直接获取真实dom进行操作(不推荐)

import React,{createRef} from "react";

class RefComponent extends React.Component{
  // 这个实例属性是可以自定义的
  valueRef = createRef()

  getValue = () => {
    // 通过valueRef获取input的值  current是固定属性
    console.log(this.valueRef.current.value)
  }

  render() {
    return(
      <div>
        {/* ref绑定 获取真实dom */}
        <input type="text" ref={this.valueRef}/>
        <button onClick={this.getValue}>点击获取输入框的值</button>
      </div>
    )
  }
}

function App() {
  return (
    <div className="App">
      <RefComponent/>
    </div>
  );
}

export default App;