009-React 表单处理

历史文章目录连接： https://blog.csdn.net/yy763496668/article/details/113117040 此链接为CSDN连接，目的为方便大家一览博客目录！内容会定期更新。

微信公众号：猿媛大本营

概述:

受控组件 多表单元素优化 非受控组件

正文：

受控组件

表单元素的值受到React控制的元素被称为受控元素。

HTML中的表单元素是可输入的，也就是有自己的可变状态

React中可变状态通常保存在state中，并且只能通过setState()方法来修改

React将state与表单元素值value绑定在一起，由state的值来控制表单元素的值。

步骤：

1. 在state中添加一个状态，作为表单元素的value值（控制表单元素值的来源）
   
   

2. 给表单元素绑定change事件，将表单元素的值设置为state的值(控制表单元素值的变化)
   

import React from 'react'


class App extends React.Component{


  //初始化state
  state = {
    txt:''
  }
  
  handleChange = (e:any)=>{
    this.setState({
      txt:e.target.value
    })
    console.log(e.target.value);
  }
  render(){
    return(
      <div>
        <input type='text' value={this.state.txt} onChange={this.handleChange} />
      </div>
    )
  }
} 
export default App

多表单元素优化

当有多个表单元素的值需要处理的时候，多个表单元素的状态及值变化的函数要分别处理，将会增加开发的繁琐度。

优化：使用一个事件处理程序同时处理多个表单元素。

步骤：

1. 给表单元素添加name属性，名称与state相同
   

2. 根据表单元素类型的值获取对应值

3. 在change事件处理程序中通过[name]来修改对应的state
   

import React from 'react'


class App extends React.Component{


  //初始化state
  state = {
    txt:'',
    content:'',
    city:'bj',
    isChecked:false
  }
  
  handleForm = (e:any)=>{
    //获取DOM 元素
    const target = e.target
    //根据类型获取值
    const value = target.type==='checkbox'?target.checked:target.value;
    //获取name
    const name = target.name


    this.setState({
      [name]:value
    })
    console.log(value);
    
  }
  render(){
    return(
      <div>
        <input name ='txt' type='text' value={this.state.txt} onChange={this.handleForm} />
        <textarea name='content' value={this.state.content} onChange={this.handleForm}></textarea>
        <select name='city' value={this.state.city} onChange={this.handleForm}>
          <option value='sh'>上海</option>
          <option value='hn'>河南</option>
          <option value='bj'>北京</option>
        </select>
        <input type='checkbox' name='isChecked' checked={this.state.isChecked} onChange={this.handleForm} />
      </div>
    )
  }
} 
export default App

非受控组件

借助于ref 使用原生的DOM方式来获取表单元素值

ref的作用：获取DOM或组件

步骤：

1. 调用React.CreateRef()方法创建一个ref对象

txtRef:React.RefObject<any>;
  constructor(props:any) {
    super(props);
    this.txtRef = React.createRef();
  }

    2.将创建好的ref对象添加到文本框中

<input type="text" ref={this.txtRef} />

    3.通过ref对象获取到文本框的值

getTxt=()=>{
    console.log('文本框值为：'+this.txtRef.current.value);
  }

完整代码如下：

import React from 'react'


class App extends React.Component{
  txtRef:React.RefObject<any>;
  constructor(props:any) {
    super(props);
    this.txtRef = React.createRef();
  }
  getTxt=()=>{
    console.log('文本框值为：'+this.txtRef.current.value);
    
  }
  render(){
    return(
      <div>
        <input type="text" ref={this.txtRef} />
        <button onClick={this.getTxt}>获取文本框的值</button>
      </div>
    )
  }
} 
export default App

【文章导航】

https://blog.csdn.net/yy763496668/article/details/113117040

THANKS ALL !!

【关注、点赞，收藏】 关注公众号，您将第一时间收到文章更新 微信公众号：猿媛大本营 QQ群号：1056320746