04react基础-组件2

表单处理

受控组件

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

• 受控组件：值受到react控制的表单元素

  
  
  

  image.png

使用步骤

• 在state中添加一个状态，作为表单元素的value值
• 给表单元素绑定change事件，将表单元素的值设置为state的值

class App extends React.Component {
    constructor(){
        super()
        this.inputChange = this.inputChange.bind(this)
    }
    state = {
        txt : ''
    }
    inputChange(e){
       this.setState({
           txt: e.target.value
       })
    }
    render(){
        console.log(this.state);
        
        return (
            

                {/* 把state的值设置给输入框的value，绑定change事件，这样用户在输入内容的时候调用相应函数，在函数里面把当前设置的值赋值给state，从而达到数据的统一 */}
                
            
        )
    }
}
ReactDOM.render(,document.getElementById('root'))

多表单元素优化

• 问题：每个表单元素都有一个单独的事件处理函数，这样太繁琐
• 优化：使用一个事件处理程序同时处理多个表单元素

步骤

• 给表单元素添加name属性（用来区分是哪一个表单），名称与state相同（用来更新数据的）
• 根据表单内容来获取对应值
• 在change事件处理程序中通过 [name] 来修改对应的state

优化前：

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  受控组件示例
*/

class App extends React.Component {
  state = {
    txt: '',
    content: '',
    city: 'bj',
    isChecked: false
  }

  handleChange = e => {
    this.setState({
      txt: e.target.value
    })
  }

  // 处理富文本框的变化
  handleContent = e => {
    this.setState({
      content: e.target.value
    })
  }

  // 处理下拉框的变化
  handleCity = e => {
    this.setState({
      city: e.target.value
    })
  }

  // 处理复选框的变化
  handleChecked = e => {
    this.setState({
      isChecked: e.target.checked
    })
  }

  render() {
    return (
      

        {/* 文本框 */}
        
        


        {/* 富文本框 */}
        
        


        {/* 下拉框 */}
        
          上海
          北京
          广州
        
        


        {/* 复选框 */}
        
      
    )
  }
}

// 渲染组件
ReactDOM.render(,  document.getElementById('root'))

优化后：

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  受控组件示例
*/

class App extends React.Component {
  state = {
    txt: '',
    content: '',
    city: 'bj',
    isChecked: false
  }

  handleForm = e => {
    // 获取当前DOM对象
    const target = e.target

    // 根据类型获取值
    const value = target.type === 'checkbox'
      ? target.checked
      : target.value

    // 获取name
    const name = target.name

    this.setState({
      [name]: value
    })
  }

  render() {
    return (
      

        {/* 文本框 */}
        
        


        {/* 富文本框 */}
        
        


        {/* 下拉框 */}
        
          上海
          北京
          广州
        
        


        {/* 复选框 */}
        
      
    )
  }
}

// 渲染组件
ReactDOM.render(,  document.getElementById('root'))

非受控组件

• 说明：借助于ref，使用元素DOM方式获取表单元素值
• ref的作用：获取DOM或者组件
  使用步骤:
• 调用 React.createRef() 方法创建ref对象
• 将创建好的 ref 对象添加到文本框中
• 通过ref对象获取到文本框的值

class App extends React.Component {
  constructor() {
    super()

    // 1.创建ref
    this.txtRef = React.createRef()
  }

  // 2.获取文本框的值
  getTxt = () => {
    console.log('文本框值为：', this.txtRef.current.value);
  }

  render() {
    return (
      

        
        获取文本框的值
      
    )
  }
}

// 渲染组件
ReactDOM.render(,  document.getElementById('root'))

综合案例评论组件

https://gitee.com/zhangzanzz007/react-comment.git