React5.表单处理-受控组件

Posted 2022-05-17 阿拉的梦想

【React】5.表单处理-受控组件

• 1. 受控组件
• 2.非受控组件
• 3. 解构赋值

1. 受控组件

受控组件，就是让表单组件的值受react来控制

• html 中的表单元素是可输入的，也就是有自己的可变状态
• React 中可变状态通常保存在 state 中，并且只能通过 setstate()方法来修改
• React将 state 与表单元素值value綁定到一起，由 state 的值来控制表单元素的值

使用步骤：

1. 在state 中添加一个状态，作为表单元素的value值（控制表单元素值的来源）
2. 给表单元素綁定 change 事件，将 表单元素的值 设置为 state 的值（控制表单元素值的变化）

示例：

import React from 'react'


/**
 * 定义一个类组件
 */
class Fun3 extends React.Component 

  //初始化state
  state = 
    username: ''
  


  //事件处理函数
  valueChange = (e) => 
    this.setState( username: e.target.value )
  

  render() 
    return (
      <form>
        username:  <input type="text" value=this.state.username onChange=this.valueChange />
      </form>
    )
  


//导出组件，以供使用
export default Fun3

效果：

可以看到输入框里的值已经保存到state中了。

如果每个文本框啥的都有一个事件处理函数，将会很麻烦，所以下面进行优化。

事件函数优化
将事件函数抽取为一个函数，复选框比较特殊，单独加个判断就可以了

import React from 'react'


/**
 * 定义一个类组件
 */
class Fun3 extends React.Component 

  //初始化state
  state = 
    username: '',
    content: '',
    city: 'bj',
    isChecked: false,
    gender: '男'
  

  //事件处理函数
  valueChange = (e) => 
    //获取目标控件对象
    const target = e.target
    //根据控件类型获取对应的值
    const value = target.type === 'checkbox' ? target.checked : target.value;
    //获取空间name的值
    const name = target.name
    //用中括号取name的值作为key
    console.log( name: name, value )
    this.setState( [name]: value )
  

  render() 
    return (
      <form>
        /* 文本框 */
        用户名:  <input name="username" type="text" value=this.state.username onChange=this.valueChange />
        <br />
        /* 文本域 */
        用户简介: <textarea name="content" value=this.state.content onChange=this.valueChange />
        <br />
        /* 下拉框 */
        城市：<select name="city" value=this.state.city onChange=this.valueChange>
          <option value="cq">重庆</option>
          <option value="bj">北京</option>
          <option value="sh">上海</option>
        </select>
        <br />
        /* 单选框 */
        <div>
          性别：
          男<input type="radio" name="gender" id="" value='男' onChange=this.valueChange />
          女<input type="radio" name="gender" id="" value='女' defaultChecked onChange=this.valueChange />
          保密<input type="radio" name="gender" id="" value='保密' onChange=this.valueChange />
        </div>

        <br />
        /* 复选框 */
        同意：<input type="checkbox" name="isChecked" checked=this.state.isChecked onChange=this.valueChange />
      </form>
    )
  


//导出组件，以供使用
export default Fun3

效果：

2.非受控组件

很少用

使用步骤：

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

constructor
super ()
this.txtRef = React.createRef()

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

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

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

console.log (this.txtRef.current.value)

3. 解构赋值

const count=this.state.count
//解构赋值写法,后面count同样使用
const count=this.state
//还可以赋值多个
const count,name=this.state
console.log(count)
console.log(name)