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 (
      

        
hello react
         
        提交
      
    )
  }
}

在这里插入图片描述

非受控组件就是不会受到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 (
      

        
hello react
        

          this.inputValue = e} /> 
          提交
        
      
    )
  }
}