资讯专栏INFORMATION COLUMN

翻译 | 玩转 React 表单 —— 受控组件详解

big_cat / 3228人阅读

摘要:受控输入框只会显示通过传入的数据。例如,数组中的元素将会渲染三个单选框或复选框。属性接收一个布尔值,用来表示组件是否应该被渲染成选中状态。

原文地址:React.js Forms: Controlled Components

原文作者:Loren Stewart

译者:小 B0Y

校对者:珂珂君

本文涵盖以下受控组件:

文本输入框

数字输入框

单选框

复选框

文本域

下拉选择框

同时也包含:

表单数据的清除和重置

表单数据的提交

表单校验

点击这里直接查看示例代码。
查看示例。
请在运行示例时打开浏览器的控制台。

介绍

在学习 React.js 时我遇到了一个问题,那就是很难找到受控组件的真实示例。受控文本输入框的例子倒是很丰富,但复选框、单选框、下拉选择框的例子却不尽人意。

本文列举了真实的受控表单组件示例,要是我在学习 React 的时候早点发现这些示例就好了。除了日期和时间输入框需要另开篇幅详细讨论,文中列举了所有的表单元素。

有时候,为了减少开发时间,有时候人们很容易为了一些东西(譬如表单元素)引入一个库。而对于表单,我发现当需要添加自定义行为或表单校验时,使用库会让事情变得更复杂。不过一旦掌握合适的 React 模式,你会发现构建表单组件并非难事,并且有些东西完全可以自己动手,丰衣足食。请把本文的示例代码当作你创建表单组件的起点或灵感之源。

除了提供多带带的组件代码,我还将这些组件放进表单中,方便你理解子组件如何更新父组件 state ,以及接下来父组件如何通过 props(单向数据流)更新子组件。

注意:本表单示例由很赞的 create-react-app 构建配置生成,如果你还没有安装该构建配置,我强烈推荐你安装一下(npm install -g create-react-app)。目前这是搭建 React 应用最简单的方式。

什么是受控组件?

受控组件有两个特点:

受控组件提供方法,让我们在每次 onChange 事件发生时控制它们的数据,而不是一次性地获取表单数据(例如用户点提交按钮时)。“被控制“ 的表单数据保存在 state 中(在本文示例中,是父组件或容器组件的 state)。
(译注:这里作者的意思是通过受控组件, 可以跟踪用户操作表单时的数据,从而更新容器组件的 state ,再单向渲染表单元素 UI。如果不使用受控组件,在用户实时操作表单时,比如在输入框输入文本时,不会同步到容器组件的 state,虽然能同步输入框本身的 value,但与容器组件的 state 无关,因此容器组件只能在某一时间,比如提表单时一次性地拿到(通过 refs 或者选择器)表单数据,而难以跟踪)

受控组件的展示数据是其父组件通过 props 传递下来的。

这个单向循环 —— (数据)从(1)子组件输入到(2)父组件的 state,接着(3)通过 props 回到子组件,就是 React.js 应用架构中单向数据流的含义。

表单结构

我们的顶级组件叫做 App,这是它的代码:

import React, { Component } from "react";  
import "../node_modules/spectre.css/dist/spectre.min.css";  
import "./styles.css";  
import FormContainer from "./containers/FormContainer";

class App extends Component {  
  render() {
    return (
      

React.js Controlled Form Components

); } } export default App;

App 只负责渲染 index.html 页面。整个 App 组件最有趣的部分是 13 行,FormContainer 组件。

插曲: 容器(智能)组件 VS 普通(木偶)组件

是时候提及一下容器(智能)组件和普通(木偶)组件了。容器组件包含业务逻辑,它会发起数据请求或进行其他业务操作。普通组件则从它的父(容器)组件接收数据。木偶组件有可能触发更新 state (译注:容器组件的 state)这类逻辑行为,但它仅通过从父(容器)组件传入的方法来达到该目的。

注意: 虽然在我们的表单应用里父组件就是容器组件,但我要强调,并非所有的父组件都是容器组件。木偶组件嵌套木偶组件也是可以的。

回到应用结构

FormContainer 组件包含了表单元素组件,它在生命周期钩子方法 componentDidMount 里请求数据,此外还包含更新表单应用 state 的逻辑行为。在下面的预览代码里,我移除了表单元素的 props 和 change 事件处理方法,这样看起来更简洁清晰(拉到文章底部,可以看到完整代码)。

import React, {Component} from "react";  
import CheckboxOrRadioGroup from "../components/CheckboxOrRadioGroup";  
import SingleInput from "../components/SingleInput";  
import TextArea from "../components/TextArea";  
import Select from "../components/Select";

class FormContainer extends Component {  
  constructor(props) {
    super(props);
    this.handleFormSubmit = this.handleFormSubmit.bind(this);
    this.handleClearForm = this.handleClearForm.bind(this);
  }
  componentDidMount() {
    fetch("./fake_db.json")
      .then(res => res.json())
      .then(data => {
        this.setState({
          ownerName: data.ownerName,
          petSelections: data.petSelections,
          selectedPets: data.selectedPets,
          ageOptions: data.ageOptions,
          ownerAgeRangeSelection: data.ownerAgeRangeSelection,
          siblingOptions: data.siblingOptions,
          siblingSelection: data.siblingSelection,
          currentPetCount: data.currentPetCount,
          description: data.description
        });
    });
  }
  handleFormSubmit() {
    // 提交逻辑写在这
  }
  handleClearForm() {
    // 清除表单逻辑写在这
  }
  render() {
    return (
      
Pet Adoption Form
{/* Full name text input */}