一文讲清楚React受控组件和非受控组件的区别与联系

一文讲清楚React受控组件和非受控组件的区别与联系

1. 概述

• 首先明确什么是受控，什么是非受控
• 受控，谁，受谁的控制，在React中，就是表单输入值受this.state的控制
• 换句话说，就是表单显示什么值，不是由表单被输入什么值，而是完全由this.state决定，this.state是什么，表单就显示什么。
• 比如我一个input框，如果是受控组件，我们在input框内输入“hahaha”，她并不会显示hahaha，而是要看input的value绑定的this.state的值是什么，然后才显示什么。这就是受控组件
• 那么相反，非受控组件就好理解多了，就是input输入值不受this.state的控制，输入什么就显示什么
• 理解了这个，我们在详细分开来说

2. 受控组件

• 受控组件，根据上面说的，就是表单的输入值完全由this.state控制
• 上例子

import React,{
   
   useState} from 'react'
const MyComponent=()=>{
   
   
    const [name,setName]=useState('tom')
    const handleChande=(e)=>{
   
   
        setName(e.target.value)
    }
    const handleSubmit=(e)=>{
   
   
        e.preventDefault(