React学习（四）——表单处理

学习目标：理解并会使用受控表单组件和非受控表单组件

一、受控表单组件

1、什么是受控组件

        被React的状态控制的组件，受控表单组件就是说由state的值来控制表单元素的值，保证单一数据源的特性。

2、实例代码

import React,{Component} from "react";

// 创建类组件
class Test extends Component{

  
  state={
    // 声明控制表单元素的state
    val:''
  }

  // 获取表单元素的值，作为state的最新值
  handleVal=(e)=>{
    this.setState({
      val:e.target.value
    })
    console.log(this.state.val)
  }

  render(){
    return(
      <>
      {/* 设置value，绑定change事件 */}
       <input 
       value={this.state.val}
       onChange={this.handleVal}>
       </input>
      </>
    );
  }
}

3、实现步骤

• 声明声明控制表单元素的state，如val
• 把这个值和表单元素的value做一个绑定
• 给表单元素绑定一个change事件
• change事件处理函数通过e.target.value获取表单元素的值
• 将表单元素的值作为state的最新值

二、非受控表单组件

1、什么是非受控组件

        通过手动操作dom的方式获取文本框的值，文本框的状态不受state组件的的state中的状态控制，直接通过原生dom获取输入框的值

2、示例代码

import React,{Component,createRef} from "react";

// 创建类组件
class Test extends Component{

  // 使用createRef函数，创建一个存放dom的对象容器
  formRef=createRef()

  // 通过this.formRef.current.value获取到表单元素的值
  handleVal=()=>{
   console.log(this.formRef.current.value)
  }

  render(){
    return(
      <>
      {/* 通过ref绑定，获取真实dom */}
       <input 
       ref={this.formRef}
       onChange={this.handleVal}>
       </input>
      </>
    );
  }
}

这个逻辑似乎是通过ref获取到真实的dom，然后在真实的dom中获取到它的value值（不确定再看看）