React-表单处理

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>
    )
  }
}

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>
    )
  }
}

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>
    )
  }
}