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

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)