React 的受控组件和非受控组件

受控组件：受到 React 控制的表单元素

import React from 'react'

// 1.受控组件：受到'React'控制的表单元素
// HTML中表单元素是可输入的，也就是有自己可变的状态，而 React 中可变状态通常保存在 state 中，并且只能通过 setState() 方法来修改；React 将 state 与表单元素值 value 绑定到一起，由 state 的值来控制表单元素的值

// 使用步骤
// 1.给表单元素添加name属性，名称与state相同
// 2.根据表单元素类型获取对应值（有些表单是value，有的是checked）
// 3.在change事件处理程序中通过[name]来修改对应的state

// 使用类组件形式
class App extends React.Component {
    
    
    // 简化语法初始化state
    state = {
    
    
        txt: '',
    }
    handleAllChange = 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 (
            <div>
            	// 设置 name 属性，change 事件动态获取类型
            	<input type="text" name="txt" value={
    
    this.state.txt} onChange={
    
    this.handleAllChange} />
            </div>
        )
    }
}

export default App

非受控组件（不推荐）

import React from 'react'


// 2.非受控组件（不推荐）
// 借助ref，使用原生DOM方式来获取表单元素值
// ref的作用：获取DOM或组件

// 使用步骤
// 1.使用React.createRef()方法创建一个ref对象
// 2.将创建好的ref对象添加到文本框中（关联表单元素）
// 3.通过ref对象获取到文本框的值

// 使用类组件形式
class App extends React.Component {
    
    
    constructor() {
    
    
        super()
        // 创建ref
        this.txtRef = React.createRef()
    }

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

    render() {
    
    
        return (
            <div>
                <input type="text" ref={
    
    this.txtRef} />
                <button type="" onClick={
    
    this.getTxt}>获取文本框的值</button>
            </div>
        )
    }
}

export default App