react之受控组件和非受控组件

一. 受控组件

• 表单处理差异: 在React中，HTML表单元素的处理方式与普通DOM元素不同，表单元素通常会保存在内部state中

• 官方定义: 受控组件是React官方提出的概念，指表单元素的值由React的state控制

• 核心机制:

  • 表单元素绑定value属性到state
  • 必须同时提供onChange事件处理
  • 通过setState更新值形成双向数据流

• 典型特征:

  • 输入值完全由React state控制
  • 用户输入需要通过事件处理更新state
  • 会收到React关于缺少onChange的警告

简单区分就是一旦表单元素绑定value属性state里面属性就是受控组件

适用于input、checkbox、radio、select等其他表单元素

import React, { PureComponent } from 'react'

    -   在state中定义存储字段(如username)
    -   input绑定value={this.state.username}
    -   添加onChange={(e)=>this.handleChange(e)}
    -   在inputChange中用setState更新值
    
export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      username: "clare"
    }
  }

  inputChange(event) {
    console.log("inputChange:", event.target.value)
    this.setState({ username: event.target.value })
  }

  render() {
    const { username } = this.state

    return (
      <div>
        {/* 受控组件 */}
        <input type="checkbox" value={username} onChange={e => this.inputChange(e)}/>

        {/* 非受控组件 */}
        <input type="text" />
        <h2>username: {username}</h2>
      </div>
    )
  }
}

export default App

二. 非受控组件

• 基本特征:

  • 表单元素的值不由React state管理
  • 用户输入直接反映在DOM元素上
  • 需要通过ref或事件手动获取值

• 典型实现:

  • 未绑定value属性的input元素
  • 可通过原生DOM方式直接修改值

• 使用场景:

  • 简单表单且不需要实时验证
  • 需要直接操作DOM的场景

• 基本特征:

  • 表单元素的值不由React state管理
  • 用户输入直接反映在DOM元素上
  • 需要通过ref或事件手动获取值

• 典型实现:

  • 未绑定value属性的input元素
  • 可通过原生DOM方式直接修改值

• 使用场景:

  • 简单表单且不需要实时验证
  • 需要直接操作DOM的场景 ``

import React, { PureComponent } from 'react'

export class App extends PureComponent {
  
  constructor() {
    super()

    this.state = {
      username: ""
    }
  }

  inputChange(event) {
    console.log("inputChange:", event.target.value)
    this.setState({ username: event.target.value })
  }

  render() {
    const { username } = this.state

    return (
      <div>
        {/* 受控组件 */}
        <input type="checkbox"  onChange={e => this.inputChange(e)}/>

        {/* 非受控组件 */}
        <input type="text" />
        <h2>username: {username}</h2>
      </div>
    )
  }
}

export default App