React基础篇（五）：受控组件和非受控组件

一、受控组件和非受控组件的介绍

HTML表单在React中使用起来有所不同，官方文档是这么说的：

在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同，这是因为表单元素通常会保持一些内部的 state。

要在React里面实现HTML表单，必须做一些特殊处理。官方文档里面有两种方式：受控组件和非受控组件

但大多数情况下，使用 JavaScript 函数可以很方便的处理表单的提交， 同时还可以访问用户填写的表单数据。实现这种效果的标准方式是使用“受控组件”。

有时使用受控组件会很麻烦，因为你需要为数据变化的每种方式都编写事件处理函数，并通过一个 React 组件传递所有的输入 state。当你将之前的代码库转换为 React 或将 React 应用程序与非 React 库集成时，这可能会令人厌烦。在这些情况下，你可能希望使用非受控组件, 这是实现输入表单的另一种方式。

由此可见，没有特殊需求，我们一般使用受控组件。本文阐述受控组件

二、受控组件

在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。

我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

看不懂这些官方术语都没关系，我们以一个input表单元素为例。

普通的input表单元素:

<input />

一般的表单元素自己维护state，并根据用户输入进行更新。在使用react的时候，我们希望把可变状态放到组件内部的state属性中，并且通过state来更新。

我们下面来处理这个组件，使之变成受控组件

受控的input表单元素。

<input value={this.state.inputMsg} onChange={this.handleInput} />

首先input表单元素绑定了一个onChange事件，时刻监听表单输入的变化，handleInput方法就是讲input的值存到内部的state中。value就是从内部的state拿到用户的输入值。

具体的实现

下面的ChatApp实现了一个受控的input表单元素。MessageList是他的子组件，需要从ChatApp中的state获取用户输入的值：

import React from "react";

class MessageList extends React.PureComponent {
  render() {
    return <ul>{this.props.messages.map(msg => <li>{msg}</li>)}</ul>;
  }
}

export default class ChatApp extends React.Component {
  state = {
    messages: [],
    inputMsg: "",
  };



  handleInput = evt => {
    this.setState({
      inputMsg: evt.target.value,
    });
  };

  handleSend = () => {
    const text = this.state.inputMsg;
    if (text) {
      const newMessages = [...this.state.messages, text];
      this.setState({
        messages: newMessages,
        inputMsg: "",
      });
    }
  };
  render() {
    return (
      <div>
        <MessageList messages={this.state.messages} />

        <div>
          <input value={this.state.inputMsg} onChange={this.handleInput} />
          <button onClick={this.handleSend}>Send</button>
        </div>
        <h2>{this.props.time.toLocaleString()}</h2>
      </div>
    );
  }
}

参考文档：https://zh-hans.reactjs.org/docs/forms.html

参考视频：https://time.geekbang.org/course/detail/100009301-9438?utm_source=pinpaizhuanqu&utm_medium=geektime&utm_campaign=guanwang&utm_term=guanwang&utm_content=0511