React-表单处理

Posted 2021-03-08 xiaowzi

一、受控组件的概念

　　首先 html 中每个表单元素都有自己的属性，自己管理自己， 但是 react 希望每个表单属性值都交给 state 来进行处理和统一的管理，这时候就把两者进行了结合

　　受控组件就是将 value 值交给 state 管理的表单元素

 

二、受控组件基础使用

　　1、控制表单元素值的来源

　　2、控制表单元素值的变化

import React from ‘react‘ 

export default class App extends React.Component {
  // 1.控制表单元素值的来源
  state = {
    value: ‘1‘
  }
  
  // 2.控制表单元素值的变化
  handle = e => {
    this.setState({
      value: e.target.value
    })
  }

  render() {
    return (
      <div>
        <input value={this.state.value} onChange={this.handle} />
      </div>
    )
  }
}

 

三、多表单元素的优化

　　1、给表单元素添加 name 属性,值等于对应的 state 

　　2、判断表单元素类型

　　3、获取元素的名称

　　4、根据获取的 name 值修改 state

import React from ‘react‘

export default class App extends React.Component {
  state = {
    inputVal: ‘‘,
    isChecked: false
  }

  handleChange = e => {
    // 2.判断表单元素类型
    const value = e.target.type === ‘checkbox‘ ? e.target.checked : e.target.value
    // 3.获取元素的名称
    const name = e.target.name
    // 4.根据获取的 name 值修改 state
    this.setState({
      [name] : value
    })
  }

  render () {
    return (
      <div>
        {/* 1、给表单元素添加 name 属性,值等于对应的 state */}
        {/* 文本框 */}
        <input type="text" value={this.state.inputVal} name="inputVal" onChange={this.handleChange}/>
        {/* 复选框 */}
        <input type="checkbox" checked={this.state.isChecked} name="isChecked" onChange={this.handleChange} />
      </div>
    )
  }
}

 

四、非受控元素

　　1、绑定 ref 属性

　　2、创建ref

　　3、获取表单值

import React from ‘react‘

export default class App extends React.Component {
  constructor() {
    super()
    // 2、创建ref
    this.inputRef = React.createRef()
  }

  inputChange = e => {
    // 3、获取表单值
   console.log(this.inputRef.current.value)
  }

  render() {
    return (
      <div>
        {/* 1、绑定 ref 属性 */}
        <input ref={this.inputRef} onChange={this.inputChange} />
      </div>
    )
  }
}