前端C罗
前端C罗

React中的受控组件&非受控组件

React官方的文档和社区中对于受控组件和非受控组件均有相关的文章进行讲解，作为React新手老实讲还是花了些时间去理解和消化。

本文从一个新手的学习和实践的角度来试图对其进行对比，并通过hooks代码进行相应地说明。

为何有受控/非受控的区别

在HTML标签中，有一类特殊的dom标签，表单类标签，比如input，textarea，select等。这类标签自身具备状态，并且自身会维护自己的状态。当开发者使用React来开发表单组件时，会有相应的一套状态管理机制，此时如何将React的状态和表单组件的状态统一到一起就涉及到对表单组件状态的管控。

所谓受控（controlled）与非受控（uncontrolled），其核心的区别在于组件的状态是否可以通过代码控制。顾名思义，受控是状态受代码控制，相反则是状态不受代码控制。

受控组件

下面通过简单的示例代码来展示受控组件中对于状态的管控

input组件
import {useState} from 'react'

export default function Input() {
    const [value, setValue] = useState('')
    
    const handleChange = (e: any) => {
      setValue(e.target.value)
    }
    const handleSubmit = (e: any) => {
      e.preventDefault()
      // 消费状态 value
      console.log(value)
    }
  
    return (
      

        
        
      

    );
}
textarea组件

与input些许不同的是，textarea通过子元素定义其文本（状态），代码示例如下

在React中，相应的状态管控则如下代码所示

import {useState} from 'react'

export default function Textarea() {
    const [value, setValue] = useState('我是textarea的状态')
    
    const handleChange = (e: any) => {
      setValue(e.target.value)
    }
    const handleSubmit = (e: any) => {
      e.preventDefault()
      // 消费状态 value
      console.log(value)
    }
  
    return (