关于React 处理表单元素，有两种方式:
- 受控组件【推荐】
- 非受控组件
受控组件-表单元素（状态可变，react的state控制）
- HTML中表单元素是可输入的，即表单用户并维护着自己的可变状态（input 的 value）。
- 可变状态保存在state中，只能通过
setState进行修改。 - React中将state中的数据与表单元素的value值绑定到了一起，
由state的值来控制表单元素的值 - 受控组件：value值受到了react控制的表单元素 （value的双向绑定，如onInput、onchange、value）
- 相当于VUE的v-model语法糖:valuse=“message”, @input=“onInput”
class App extends React.Component {state = {inputValue: 'hello react'}handleChange = (e) => {this.setState({msg: e.target.value})}render() {return (<div><input type="text" value={this.state.inputValue} onChange={this.handleChange}/></div>)}
}
非受控组件-ref-表单元素（状态不可变，通过ref直接控制数据）
通过ref 的createRef()方法，控制DOM的方式来获取表单元素的值
- 非受控组件是通过ref操作 DOM 的方式来控制
import { createRef } from 'react'class New extends Component {// 声明一个refnewRef = createRef()handleClick = () => {console.log(this.newRef.current.value) // 控制dom的value}render() {// 赋值给当前domreturn (<div><input ref={this.newRef} /><button onClick={handleClick}>触发handleClick</button></div>)}
}
