react学习系列（三）

受控组件和不受控组件

受控组件和不受控组件只存在于表单元素。所谓的受控组件就是就是表单元素的value需要通过state（或useState）来定义。不受控组件意味着表单元素的value无法通过state获取，只能用ref（或useRef)来获取。

1.不受控组件

​ 组件中表单元素没有写value值，与state数据无关，不受组件管理。(不推荐)

具体使用步骤：

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

//不受控组件
import React, { usestate,useRef} from 'react'
export default function App(){
const element = useRef(null)
const [value,setValue] = useState("")

return(
	<div>
		<h3>不受控组件</h3>
		<input type ="text" ref={element}/>
		<button onClick={()=>console.log(element.current)}>获取input的值</button>
	</div>
)
}

2.受控组件

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

使用步骤

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

import React from 'react'


// 使用类组件形式
export default 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>
        )
    }
}