九、react表单处理

一、说明

下面代码运行后会报错，因为在React中并不存在类似于Vue的双向数据绑定操作

import React, { Component } from "react";

class App extends Component {
  state = {
    msg: "hello world",
  };
  render() {
    return (
      <div>
        <input type="text" value={this.state.msg} />
      </div>
    );
  }
}

export default App;

需要注意以下几点

1、Vue中的v-model是语法糖

2、React里使用的是单向数据流

二、受控组件

将state与表单项中的value值绑定在一起，由state的值来控制表单元素的值，称为受控组件

绑定步骤

1、添加一个state状态，作为表单元素的value值

2、给表单元素绑定change事件，将表单元素的值设置为state的值

// 案例一：
import React from 'react'
class Login extends React.Component{
  
  state = {
    username: '',
    password: ''
  }

    // 保存用户名到状态中
  saveUsername = (event) => {
    this.setState(state => {
      return {
        username: event.target.value
      }
    })
  }
  // 保存用户密码到状态中
  savePassword = (event) => {
    this.setState(state => {
      return {
        password: event.target.value
      }
    })
  }
  // 表单提交的回调
  handleSubmit = (event) => {
    event.preventDefault()
    const {username, password} = this.state
    //console.log(username, password)
  }
  
  render(){
    return(
      <form
        action="https://www.baidu.com"
        onSubmit={handleSubmit}>
          用户名：<input
              onChange={saveUsername}
              type="text"
              name="usename"/>
        密码：<input
             onChange={savePassword}
             type="text"
             name="password"/>
        <button>登录</button>
      </form>
    )
  }
}
export default Login;

// 案例二：受控组件，用户信息修改
import React, { Component } from "react";

class App extends Component {
  state = {
    userinfo: {
      username: "zhangsan",
      mobile: "13800138000",
      email: "zhangsan@hahaha.com",
      gender: "女",
      edm: true,
    },
  };
  render() {
    // 获取初始的数据
    let { username, mobile, email, gender, edm } = this.state.userinfo;
    return (
      <div>
        <div>
          <input
            type="text"
            value={username}
            name="username"
            onChange={this.changeHandler.bind(this)}/>
        </div>
        <div>
          <input
            type="text"
            value={mobile}
            name="mobile"
            onChange={this.changeHandler.bind(this)}/>
        </div>
        <div>
          <input
            type="text"
            value={email}
            name="email"
            onChange={this.changeHandler.bind(this)}/>
        </div>
        <div>
          <input
            type="radio"
            value="男"
            name="gender"
            checked={gender === "男" ? true : false}
            onChange={this.changeHandler.bind(this)}/>
          男
          <input
            type="radio"
            value="女"
            name="gender"
            checked={gender === "女" ? true : false}
            onChange={this.changeHandler.bind(this)}/>
          女
        </div>
        <div>
          <input
            type="checkbox"
            name="edm"
            checked={edm ? true : false}
            onChange={this.changeHandler.bind(this)}/>
          接受电子邮件营销
        </div>
        <div>
          <button onClick={this.submitForm.bind(this)}>提交</button>
        </div>
      </div>
    );
  }
  changeHandler(e) {
    // console.log(e.target.value);
    let value = e.target.value;
    let name = e.target.name;
    let type = e.target.type;
    this.setState((state) => {
      if (type === "checkbox") {
        state.userinfo[name] = !state.userinfo[name];
        // if(state.userinfo[name]){
        //     state.userinfo[name] = false;
        // }else{
        //     state.userinfo[name] = true;
        // }
      } else {
        state.userinfo[name] = value;
      }
      return state;
    });
  }
  submitForm(){
    // 表单提交时收集表单数据
    console.log(this.state.userinfo);
  }
}
export default App;

• 如果需要将原本应该分别处理的事件合在一起去写的话，一定需要多传递一个参数用于记录当前修改的是state中的哪一个值，此时可以选择以下方案中的任意一种：
  • 通过相同name属性值去辨别，给每个表单项设置与state中相同的key名的name值，然后通过事件对象去获取
  • 可以直接在事件绑定的位置传递标记，例如：onChange={this.changeHandler.bind(this,'username')}
• 表单项中表单项类型为checkbox的比较特殊，与其他类型的不同，需要特殊处理（取反操作，而其余的表单项是来什么值用什么值）
  

三、非受控组件

现用现取，没有和state数据源进行关联的表单项

借助ref，使用元素DOM方式获取表单元素值

 

// 案例一：回调形式的ref
import React from 'react'
class Login extends React.Component{
  
  handleSubmit = (event) => {
    event.preventDefault()
    const {username, password} = this
    console.log(username, password)
  }
  
  render(){
    return(
      <form
        action="https://www.baidu.com"
        onSubmit={handleSubmit}>
          用户名：<input
              ref={c => this.username = c}
              type="text"
              name="usename"/>
        密码：<input
             ref={c => this.password = c}
             type="text"
             name="password"/>
        <button>登录</button>
      </form>
    )
  }
}
export default Login

• 使用步骤
  • 调用React.createRef()方法创建ref对象
  • 将创建好的ref对象添加到文本框中
  • 通过ref对象获取到文本框的值

一般表单项少的时候可以考虑使用非受控组件。

非受控组件不能给表单项加value属性，一旦加了它就不是非受控组件了，它就成了受控组件了。如果有默认值通过defaultValue属性进行输出。

// 案例二：createRef()形式
import React, { Component, createRef } from "react";

class App extends Component {
  constructor(props) {
    super(props)
    this.username = createRef()
  }
  render() {
    return (
      <div>
        <div>
          <input type="text" defaultValue="" ref={this.username} />
        </div>
        <div>
          <button onClick={this.submitForm.bind(this)}>提交</button>
        </div>
      </div>
    );
  }
  submitForm() {
    console.log(this.username.current.value);
  }
}

export default App;