React组件
目标
能够知道受控组件是什么
能够写出受控组件
了解非受控组件
表单处理
受控组件（★★★）
HTML中的表单元素是可输入的，也就是有自己的可变状态
而React中可变状态通常保存在state中，并且只能通过setState() 方法来修改
React讲state与表单元素值value绑定在一起，有state的值来控制表单元素的值
受控组件：值受到react控制的表单元素
使用步骤
在state中添加一个状态，作为表单元素的value值
给表单元素绑定change事件，将表单元素的值设置为state的值
示例demo
classAppextendsReact.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 ( <div> {/* 把state的值设置给输入框的value，绑定change事件，这样用户在输入内容的时候调用相应函数，在函数里面把当前设置的值赋值给state，从而达到数据的统一 */} <inputtype="text"value={this.state.txt} onChange={this.inputChange}/></div> ) } } ReactDOM.render(<App/>,document.getElementById('root'))
多表单元素优化
问题：每个表单元素都有一个单独的事件处理函数，这样太繁琐
优化：使用一个事件处理程序同时处理多个表单元素
步骤
给表单元素添加name属性（用来区分是哪一个表单），名称与state相同（用来更新数据的）
根据表单内容来获取对应值
在change事件处理程序中通过 [name] 来修改对应的state
示例demo
inputChange(e){ lettarget=e.target; letvalue=target.type=='checkbox'?target.checked : target.value; this.setState({ [e.target.name]: value }) } <inputtype="text"value={this.state.txt} name="txt"onChange={this.inputChange}/><inputtype="checkbox"value={this.state.isChecked} name="isChecked"onChange={this.inputChange}/>
非受控组件 （了解）
说明：借助于ref，使用元素DOM方式获取表单元素值
ref的作用：获取DOM或者组件
使用步骤
调用 React.createRef() 方法创建ref对象
将创建好的 ref 对象添加到文本框中
通过ref对象获取到文本框的值
classAppextendsReact.Component { constructor(){ super() //创建 refthis.txtRef=React.createRef() } // 获取文本框的值getTxt=() => { console.log(this.txtRef.current.value) } render(){ return ( <div><inputtype="text"ref={this.txtRef} /><buttononClick={this.getTxt}>获取值</button></div> ) } }
