浅谈受控组件

引言

跟着网课学习react的过程中，在做评论区模块的过程中，遇到这样一串代码。

		...上部省略
<textarea
                cols="80"
                rows="5"
                placeholder="发条友善的评论"
                className="ipt-txt"
                value={this.state.comment}
                onChange={this.textareaChange}
              />
         ...下部省略

他设置了一个comment，再通过onChange监听当前textarea区域，把value值赋给comment，刚看到这串代码时，没明白为什么要以这种方式获取value，查阅相关资料后，才明白，react中表单组件的defaultValue值一旦经过传递后，后续改变都会被忽略，具体来说这原本是一种react非受控组件，其状态是在textarea的react内部控制，不受调用者控制。

受控组件

什么是受控组件？ 受控组件就是添加了value的组件，而添加了value的组件是不会维护自己的state的，一旦设定了某个值，就需要调用者控制state改变value值。

textareaChange = (e) => {
    this.setState({
      comment: e.target.value
    })
  }

通过onChange时刻监听textarea，改变value的state，将最新的value值传给comment，来完成对组件的控制。

参考：https://www.cnblogs.com/sexintercourse/p/16082406.html