18. React的受控和非受控组件

4. 受控和非受控组件

• 4.1. 认识受控组件

  • 1. 在React中，HTML表单的处理方式和普通的DOM元素不太一样：表单元素通常会保存在一些内部的state。
  • 2. 比如下面的HTML表单元素：
    • 2.1. 这个处理方式是DOM默认处理HTML表单的行为，在用户点击提交时会提交到某个服务器中，并且刷新页面；
    • 2.2. 在React中，并没有禁止这个行为，它依然是有效的；
    • 2.3. 但是通常情况下会使用Javascript函数来方便的处理表单提交，同时还可以访问用户填写的表单数据；
    • 2.4. 实现这种效果的标准方式是使用"受控组件"
      

• 4.2. 受控组件基本演练

  • 1. 在HTML中，表单元素(如<input/> <textarea/> <select/>)之类的表单元素通常自己维护state, 并根据用户输入进行更新；
  • 2. 而在React中，可变状态(mutable state)通常保存在组件的state属性中，并且只能通过使用setState()来更新；
    • 2.1. 将两种结合起来，使React的state成为"唯一数据源";
    • 2.2. 渲染表单的React组件还控制着用户输入过程中表单发生的操作；
    • 2.3. 被React以这种方式控制取值的表单输入元素就叫做"受控组件";
  • 3. 由于在表单元素上设置了value属性，因此显示的值将始终为this.state.value，这使得React的state成为"唯一数据源"；
  • 4. 由于handleUsernameChange()方法在每次按键时都会执行并更新React的state, 因此显示的值将随着用户输入而更新；
       

• 4.2. 受控组件的其他演练

  • 1. textarea标签
    • textarea标签和input比较相似
  • 2. select标签
    • select标签的使用也非常简单，只是它不需要通过selected属性来控制那一个被选中，它可以匹配state的value来选中。
  • 3. 处理多个输入
    • 3.1. 多处理方式可以像单处理方式那样进行操作，但是需要多个监听方法；
    • 3.2. 这里我们可以使用ES6的一个语法： 计算属性名(Computed property names)

• 1.2. 非受控组件

  • 1. React推荐大多数情况下使用受控组件来处理表单数据：
    • 1.1. 一个受控组件中，表单数据是由React组件来管理的；
    • 1.2. 另一种替代方案是使用非受控组件，这是表单数据将交由DOM节点来处理；
  • 2. 如果使用非受控组件中的数据，那么我们需要是哟共ref来从DOM节点中获取表单数据。
    • 2.1. 我们来进行一个简单的演练；
    • 2.2. 使用ref来获取input元素；
    • 2.3. 示例代码如下：

  • 3. 在非受控组件中通常使用defaultValue累设置默认值；
  • 4. 同样，<input type="checkbox">和<input type="radio">支持defaultChecked，<select>和<textarea> 支持 defaultValue。