- 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
翻看前面几篇内容，关于 JSX 交互部分，用户的页面操作，都是由表单承接的，那么接下来的表单的处理就是重点了。
表单处理 (JSX 交互)
React 中表单的处理，实际是用户与应用之间的交互逻辑，而应用与用户之间的交互都是表单来承接的，所以我们实际学习的内容就是JSX 与用户表单数据的交互 。
在 React 中，表单又分为了受控表单和非受控表单两种类别。
受控表单：表单元素的值全部出 React 来进行管理，此时表单元素中的值都放在 state 中，所以表单元素里的值需要从 state 中进行获取。
非受控表单： 不受 React 管理控制，表单元素的数据由 DOM 元素本身进行管理，表单元素的值也是存放在 DOM 元素里的，获取的时候需要操作 DOM 元素。
React 的基本逻辑是数据决定 UI的，所以 React 必然要控制数据，而非受控表单显然不符合这个基本逻辑，实际开发中也很少遇到，重点还是受控表单。
接下来，通过具体的代码来研究一把子。
受控组件(表单)
我们使用普通的表单，在表单中展示 state 中的数据：
import React, { Component } from 'react'
export class Tables extends Component {
state = {
name:"xiling"
}
render() {
return (
<div>
<input type="text" value={this.state.name} />
</div>
)
}
}
export default Tables
页面中呈现的表单及内容是完全没问题的，但是当我们在页面中尝试修改表单数据时，你会发现是无法修改的，而且还报错了，这和前面学习的 state 的修改条件是一致的，不能直接修改，需要通过 setState() 方法进行数据的修改，代码如下：
changes = (ev)=>{
this.setState({
name:ev.target.value
})
}
render() {
return (
<div>
<input type="text" value={this.state.name} onChange={this.changes} />
</div>
)
}
}
表单的修改是由用户输入操作的，也就是用户输入到表单是什么值，相对应的 state 就改成什么值。
而这个操作，就需要获取到表单中用户的输入，同时我们也需要知道用户是何时触发修改动作的，所以，我们需要给表单绑定一个修改值这个动作的触发事件 onChange ，在事件触发后，事件处理函数接收 事件对象（ev）从而获取用户的修改内容，然后再通过 setState() 修改数据。
这个逻辑并没有什么问题，但是，如果我们有两个表单，就需要对应的两个事件处理函数，如果有3个表单，4个表单，10个表单……
import React, { Component } from 'react'
export class Tables extends Component {
state = {
name:"xiling",
age:18
}
changes = (ev)=>{
this.setState({
name:ev.target.value
})
}
ages = (ev)=>{
this.setState({
age:ev.target.value
})
}
render() {
return (
<div>
<input type="text" value={this.state.name} onChange={this.changes} />
<input type="text" value={this.state.age} onChange={this.ages} />
</div>
)
}
}
export default Tables
这样的写法肯定不对，最直观的修改办法就是将单独的事件处理函数删除，直接把事件的函数处理写到事件绑定上，比如这样：
render() {
return (
<div>
<input type="text" value={this.state.name}
onChange={(ev)=>{
this.setState({name:ev.target.value})
}}
/>
<input type="text" value={this.state.age}
onChange={(ev)=>{
this.setState({age:ev.target.value})
}}
/>
</div>
)
}
但是，即便这样，依然存在需要为每个表单单独写修改逻辑的问题，表单一旦多了之后，也是一个非常棘手的问题，能不能对表单的修改进行统一的管理呢？
当然可以！我们利用表单属性就可以实现。
做法也很简单，我们给每一个表单添加一个name属性，属性值与 state 中的属性值保持一致，这样在事件处理函数中就可以获取表单的属性值了，因为与state 是保持一致的，所以，我们就可以直接把表单属性当作要修改的 state 属性值使用了，代码如下：
import React, { Component } from 'react'
export class Tables extends Component {
state = {
name:"xiling",
age:18
}
tables = (ev)=>{
const prop = ev.target.name
this.setState({
[prop]:ev.target.value
})
}
render() {
return (
<div>
<input type="text" name="name" value={this.state.name} onChange={this.tables} />
<input type="text" name="age" value={this.state.age} onChange={(ev)=>this.tables(ev)} />
</div>
)
}
}
export default Tables
最后，我们再来解决报错问题。报错的原因在控制台中已经很明确了，受控表单需要对应的事件处理来控制数据的变化，如果没有那就会出现报错。
但是，如果我只想将数据在表单中展示，并不想进行控制修改的情况下，依然出现这样的错误，就非常不友好了，那应该怎么做呢？有两种解决办法，都很简单，我们来看一下。
render() {
return (
<div>
{/* 第一种就是加一个 readOnly 属性,告诉 React 表单为只读的，不需要修改 */}
<input type="text" value={this.state.name} readOnly onChange={(ev) => {
this.setState({ name: ev.target.value })
}} />
{/* 需要注意，设置为只读后，即便添加修改事件，也不能修改 */}
{/* 第二种就是使用 defaultValue 赋值 */}
{/* 意思就是设置默认值 */}
<input type="text" defaultValue={this.state.age} />
</div>
)
}
常用的受控表单示例
受控的下拉列表
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年之前一定可以写完的！(ง •_•)ง
