React中受控组件和非受控组件

一，受控组件

1.概念：

受控组件就是可以被 react 状态控制的组件
在 react 中，Input textarea 等组件默认是非受控组件（输入框内部的值是用户控制，和 React 无关）。但是也可以转化成受控组件，就是通过 onChange 事件获取当前输入内容，将当前输入内容作为 value 传入，此时就成为受控组件。
好处：可以通过 onChange 事件控制用户输入，使用正则表达式过滤不合理输入。

2.步骤：

a.在state中定义状态

b.对表单元素做两件事:

1. 设置value为上面定义的状态
2. 绑定onChange事件，并在回调中通过setState来修改状态值

受控组件DOM操作、双向数据绑定:

class App extends React.Component {
  state = {
    // 1. 在state中定义状态
    msg: 'hello react'
  }

  handleChange = (e) => {
    this.setState({
      msg: e.target.value
    })
  }
  
  handleClick = （）=> {