前端开发react框架 - 表单

表单：

1. 受控组件（state属性与表单元素的value绑定，由state的值来控制表单元素的值）
2. 非受控组件

受控组件的流程：

在state中添加一个属性赋值初始值，绑定表单元素的value

1. 文本，富文本，下拉框 改变value值
2. 复选框，改变checked值

绑定的表单元素上添加onChange事件

多表单元素优化：

1. 给表单元素添加name属性，属性值和state相同
2. 根据表单元素类型获取对应的值（const val = e.target.type === 'checkbox' ? target.checked : target.value ）
3. 在change事件处理中通过设置动态属性[name]来修改值

非受控组件的流程：

class Comp extends React.Component{

constructor(){

super()

this.inputRef = React.CreateRef()

}

getTxt = () => {

console.log(this.inputRef.current.value)

}

render(){

return (

<div>

<input type='text' ref={this.inputRef} />

<button onClick={this.getTxt}>btn</button>

</div>

)

}

}