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

【React】5.表单处理-受控组件 1. 受控组件2.非受控组件3. 解构赋值

1. 受控组件

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

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

使用步骤：

在state 中添加一个状态，作为表单元素的value值（控制表单元素值的来源）给表单元素綁定 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.非受控组件

很少用

使用步骤：

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

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

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

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

通过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)