react受控组件和非受控组件

受控组件就是受到state控制

 import React, { Component } from 'react'

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      username: ""
    }
  }
  changeHandler = (e)=> {
    console.log("e",e.target);
    let { value,name} = e.target;
    this.setState({
      [name]:value
    },()=>{
      console.log("this.username",this.state.username);
    })
  }
  render() {
    return (
      <div>
        <h1>hello react</h1>
        <input type="text" name="username"  value={this.username} onChange={this.changeHandler}/> 
        <button>提交</button>
      </div>
    )
  }
}

非受控组件就是不会受到state控制

 import React, { Component } from 'react'

export default class App extends Component {
  constructor() {
    super()
    this.inputValue = React.createRef()
  }
  submitHandler = (e)=> {
    e.preventDefault();
    console.log("this.inputValue",this.inputValue.value);
  }
  componentDidUpdate() {
   
  }
  render() {
    return (
      <div>
        <h1>hello react</h1>
        <form action="" onSubmit={this.submitHandler}>
          <input type="text" ref={e=>this.inputValue = e} /> 
          <button>提交</button>
        </form>
      </div>
    )
  }
}