受控和非受控表单 | 不受控制的东西，你非要往家领？
回忆一下之前的内容：
常用的受控表单示例
受控的下拉列表
import React, { Component } from 'react'export class Tables extends Component {state = {subject: "HTML"}render() {return (<div><p>{this.state.subject}</p><select name="" id="" value={this.state.subject}onChange={(ev) => this.setState({ subject: ev.target.value })}><option value="JS">JS</option><option value="HTML">HTML</option><option value="CSS">CSS</option></select></div>)}}export default Tables
受控单选框
import React, { Component } from 'react'export class Tables extends Component {state = {sex: "男"}render() {return (<div><p>{this.state.sex}</p><input type="radio" name="sex" id="" value="男"onChange={(ev) => this.setState({ sex: ev.target.value })} /> 男<input type="radio" name="sex" id="" value="女"onChange={(ev) => this.setState({ sex: ev.target.value })} /> 女<input type="radio" name="sex" id="" value="妖"onChange={(ev) => this.setState({ sex: ev.target.value })} /> 妖</div>)}}export default Tables
受控复选框
import React, { Component } from 'react'export class Tables extends Component {// 模拟数据源Datas = [{id:1,title:'HTML',isChecked:false},{id:2,title:'JS',isChecked:true},{id:3,title:'CSS',isChecked:false},]checks = (index,ev)=>{// console.log(ev.target.checked)// console.log(index)this.Datas[index].isChecked = ev.target.checked}render() {return (<div><h2>复选框</h2>{this.Datas.map((data,index)=>{return (<label key={data.id}>{/* 使用 onChange 事件绑定，传递下标及事件对象，在处理函数中进行状态修改 */}<input type="checkbox" defaultChecked={data.isChecked} onChange={(ev)=>{this.checks(index,ev)}} /> {data.title}</label>)})}<button onClick={()=>console.log(this.Datas)} >展示多选框内容数据</button></div>)}}export default Tables
非受控表单
在大多数情况下，我们推荐使用 受控表单 来处理表单数据。
在一个受控组件中，表单数据是由 React 组件来管理的。另一种替代方案是使用非受控表单，这时表单数据将交由 DOM 节点来处理。
受控表单需要为每个状态更新都编写数据处理函数，而使用非受控表单，你可以使用 ref 来从 DOM 节点中获取表单数据。
原始写法
写法也很简单，就是在表单中添加 ref 属性。React 会将整个页面中添加了 ref 属性的阶段，放到数组中，在获取时，使用 this.refs 来获取就可以。
import React, { Component } from 'react'export class Tables extends Component {gets = ()=>{console.log(this.refs.users.value)}render() {return (<div><input type="text" ref='users'/><button onClick={()=>this.gets()}>获取</button></div>)}}export default Tables
但是，这样的用法会在浏览器中看到一个警告型的报错信息，原因也很简单，在新版的 React 中，默认启用了严格模式。
Warning: A string ref, "users", has been found within a strict mode tree.
我们需要在入口的 index.js 中，将严格模式的代码删除，如下：
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
改完之后就是这个鬼样子了，错误提示就消失了：
ReactDOM.render(<App />,document.getElementById('root'));
规范化写法
但是，这样的方式并不好，别问为什么，就是不好，我们建议使用下面的方式：
import React, { Component } from 'react'export class Tables extends Component {constructor (){super()this.myref = React.createRef()}gets = ()=>{console.log(this.myref.current.value)}render() {return (<div><input type="text" ref={this.myref} /><button onClick={()=>this.gets()}>获取</button></div>)}}export default Tables
规范化的方式依然是借助 ref 来实现，只不过这个 ref 是由 React 的内置方法 createRef() 调用后生成的，在获取时，直接调用生成的 ref 就可以了。
但是，需要注意，不论哪种方式，知道就行了，非受控表单，能不用就不要用，为啥啊？不受控制的东西，你也敢往家里领？
又但是，正因为非受控表单将真实数据储存在 DOM 节点中，所以在使用非受控表单时，有时候反而更容易同时集成 React 和非 React 代码。如果你不介意代码美观性，并且希望快速编写代码，使用非受控组件往往可以减少你的代码量。否则，你应该使用受控组件。
总结
在应用页面中，与用户交互的基本都是在表单中呈现的。根据 React 框架的设计理念，对于表单的渲染工作，肯定由框架负责的，而表单数据的交互必然需要收到框架的控制和依赖，受控表单才是我们最应该使用的表单方式，但是非受控表单明显代码更多，非受控表单是为了在特殊情况下获取 Dom 而存在的，官方也不建议使用，即便非受控表单看起来更好用。
至此，React 基本语法部分，算是告一段落，这一路走来，我泪眼婆娑，我披荆斩棘，我彷徨迷惘，我真不容易……
虽然不容易，但是，我那么好看，怎么可能这么结束了呢，不写个案例也太不像话了！
下个章节见……2023年之前一定可以写完！
推荐阅读：
恭喜你又在前端道路上进步了一点点。
点个“在看”和“赞”吧！