我正在参加「掘金·启航计划」

一、表单中受控组件与非受控组件

1.1 非受控组件

React要编写一个非受控组件，可以使用ref来从DOM节点中获取表单数据，就是非受控组件。 新建uncontrolled.js写入：

import React, { Component } from 'react'

export default class Uncontrolled extends Component {
  name = React.createRef()  
  render() {
    return (
      <div>
          <h1>登陆页</h1>
          <input type="text" ref={this.name} value="123"></input>
          <button onClick={() => {
              console.log(this.name.current.value)
          }}>登录</button>
          <button onClick={() => {
              this.name.current.value = ""
          }}>重置</button>
      </div>
    )
  }
}

这种直接使用ref来从DOM节点中获取表单数据，就是非受控组件，看效果，可以重置，但是不能输入值了： 在React渲染生命周期时，表单元素上的value将会覆盖DOM节点中的值，在非受控组件中，你经常希望React能赋予组件一个初始值，但是不去控制后续的更新。在这种情况下，你可以指定一个defaultValue属性，而不是value： 这样子的话就可以重新修改输入值了。 但是这种方案也有弊端，如果子组件接收这个input的值，能传给子组件，将不会实时更新，因为没有更新状态。接下来将介绍受控组件。

1.2 受控组件

新建controlled.js写入：

import React, { Component } from 'react'

export default class Controlled extends Component {
  state = {
      name: "123"
  }
  render() {
    return (
      <div>
          <h1>登陆页</h1>
          <input type="text" value={this.state.name} onChange={(event) => {
              console.log('onChange')
              this.setState({
                  name: event.target.value
              })
          }}></input>
          <button onClick={() => {
              console.log(this.state.name)
          }}>登录</button>
          <button onClick={() => {
              this.setState({
                  name: ""
              })
          }}>重置</button>
      </div>
    )
  }
}

可以看到我们将值跟state绑定了，这样后续如果有子组件传入该值的话，也是可以监听到变化的，这个就是受控组件。

二、之前选项卡案例改为受控

在我的这篇博客中，用了备份数据，但是这样会占用内存，现在我们学了受控组件了，我们用受控组件来更改下，我们将backcinemaList注释了，并且新增text状态，将input改为受控组件：

改变渲染列表的方式： 可以看到我们这边直接用状态text来过滤了，因为每次input改变重新setState那么render函数将重新渲染，那么getCinemaList将重新执行，而我们知道，js方法filter不会改变原数组，那么页面将根据条件过滤出来的展示，并且不影响原数组。 效果展示：

三、受控组件应用之前todolist案例

在我的这篇博客中，我们增加状态text，删除ref，并且将input改为受控组件： 修改增加时的业务逻辑： 可以看到效果还是一样的。 在此基础上我们来增加一个完成checkbox： 由于每项时循环渲染出来的，所以我们数据结构改成如下： 给每项增加一个checkbox，写成受控组件： 改变选中时，函数checkedHandle处理逻辑如下： 效果如下：

在学习React的路上，如果你觉得本文对你有所帮助的话，那就请关注点赞评论三连吧，谢谢，你的肯定是我写博的另一个支持。