layuiajax提交表单控制层代码_翻译 | 玩转 React 表单 —— 受控组件详解

• 原文地址：React.js Forms: Controlled Components
• 原文作者：Loren Stewart
• 译者：小 B0Y
• 校对者：珂珂君

文章来源 | Github
文章地址 | 翻译 | 玩转 React 表单 —— 受控组件详解

本文涵盖以下受控组件：

• 文本输入框
• 数字输入框
• 单选框
• 复选框
• 文本域
• 下拉选择框

同时也包含:

• 表单数据的清除和重置
• 表单数据的提交
• 表单校验

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

介绍

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

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

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

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

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

什么是受控组件?

受控组件有两个特点:

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

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

表单结构

我们的顶级组件叫做App，这是它的代码：

import 

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

插曲: 容器（智能）组件 VS 普通（木偶）组件

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

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

回到应用结构

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

import 

我们勾勒出了应用基础结构，接下来我们一起浏览下每个子组件的细节。

<SingleInput /> 组件

该组件可以是 text 或 number 输入框，这取决于传入的 props。通过 React 的 PropTypes，我们可以非常好地记录组件拿到的 props。如果漏传 props 或传入错误的数据类型, 浏览器的控制台中会出现警告信息。

下面列举 <SingleInput /> 组件的 PropTypes：

SingleInput

PropTypes 声明了 prop 的类型（string、 number、 array、 object 等等），其中包括了必需（isRequired）和非必需的 prop，当然它还有更多的用途（欲知更多细节，请查看 React 文档）。

下面我们逐个讨论这些 PropType：

1. inputType：接收两个字符串：'text' 或 'number'。该设置指定渲染 <input type="text" /> 组件或 <input type="number" /> 组件。
2. title：接收一个字符串，我们将它渲染到输入框的 label 元素中。
3. name：输入框的 name 属性。
4. controlFunc：它是从父组件或容器组件传下来的方法。因为该方法挂载在 React 的 onChange 处理方法上，所以每当输入框的输入值改变时，该方法都会被执行，从而更新父组件或容器组件的 state。
5. content：输入框内容。受控输入框只会显示通过 props 传入的数据。
6. placeholder：输入框的占位符文本，是一个字符串。

既然该组件不需要任何逻辑行为和内部 state，那我们可以将它写成纯函数组件（pure functional component）。我们将纯函数组件赋值给一个 const 常量上。下面是 <SingleInput /> 组件的所有代码。本文列举的所有表单元素组件都是纯函数组件。

import 

接着，我们用handleFullNameChange方法（它被传入到controlFuncprop 属性）来更新<FormContainer />容器组件的 state。

// FormContainer.js

随后我们将容器组件更新后的 state （译注：这里指 state 上挂载的 ownerName 属性）通过contentprop 传回<SingleInput />组件。

<Select /> 组件

选择组件（就是下拉选择组件），接收以下 props：

Select

1. name：填充表单元素上 name 属性的字符串变量。
2. options：是一个数组（本例是字符串数组）。通过在组件的 render 方法中使用 props.options.map()， 该数组中的每一项都会被渲染成一个选择项。
3. selectedOption：用以显示表单填充的默认选项，或用户已选择的选项（例如当用户编辑之前已提交过的表单数据时，可以使用这个 prop）。
4. controlFunc：它是从父组件或容器组件传下来的方法。因为该方法挂载在 React 的 onChange 处理方法上，所以每当改变选择框组件的值时，该方法都会被执行，从而更新父组件或容器组件的 state。
5. placeholder：作为占位文本的字符串，用来填充第一个 <option> 标签。本组件中，我们将第一个选项的值设置成空字符串（参看下面代码的第 10 行）。

import 

请注意 option 标签中的 key 属性（第 14 行）。React 要求被重复操作渲染的每个元素必须拥有独一无二的 key 值，我们这里的 .map() 方法就是所谓的重复操作。既然选择项数组中的每个元素是独有的，我们就把它们当成 key prop。该 key 值协助 React 追踪 DOM 变化。虽然在循环操作或 mapping 时忘加 key 属性不会中断应用，但是浏览器的控制台里会出现警告，并且渲染性能将受到影响。

以下是控制选择框组件（记住，该组件存在于 <FormContainer /> 组件中）的处理方法（该方法从 <FormContainer /> 组件传入到子组件的 controlFun prop 中）

// FormContainer.js

<CheckboxOrRadioGroup /> 组件

<CheckboxOrRadioGroup /> 与众不同， 它从 props 拿到传入的数组（像此前 <Select /> 组件的选项数组一样），通过遍历数组来渲染一组表单元素的集合 —— 可以是复选框集合或单选框集合。

让我们深入 PropTypes 来更好地理解 <CheckboxOrRadioGroup /> 组件。

CheckboxGroup

1. title：一个字符串，用以填充单选或复选框集合的 label 标签内容。
2. type：接收 'checkbox' 或 'radio' 两种配置的一种，并用指定的配置渲染输入框（译注：这里指复选输入框或单选输入框）。
3. setName：一个字符串，用以填充每个单选或复选框的 name 属性值。
4. options：一个由字符串元素组成的数组，数组元素用以渲染每个单选框或复选框的值和 label 的内容。例如，['dog', 'cat', 'pony'] 数组中的元素将会渲染三个单选框或复选框。
5. selectedOptions：一个由字符串元素组成的数组，用来表示预选项。在示例 4 中，如果 selectedOptions 数组包含 'dog' 和 'pony' 元素，那么相应的两个选项会被渲染成选中状态，而 'cat' 选项则被渲染成未选中状态。当用户提交表单时，该数组将会是用户的选择数据。
6. controlFunc：一个方法，用来处理从 selectedOptions 数组 prop 中添加或删除字符串的操作。

这是本表单应用中最有趣的组件，让我们来看一下：

import 

checked={ props.selectedOptions.indexOf(option) > -1 } 这一行代码表示单选框或复选框是否被选中的逻辑。

属性 checked 接收一个布尔值，用来表示 input 组件是否应该被渲染成选中状态。我们在检查到 input 的值是否是 props.selectedOptions 数组的元素之一时生成该布尔值。 myArray.indexOf(item) 方法返回 item 在数组中的索引值。如果 item 不在数组中，返回 -1，因此，我们写了 > -1。

注意，0 是一个合法的索引值，所以我们需要 > -1 ，否则代码会有 bug。如果没有 > -1，selectedOptions 数组中的第一个 item —— 其索引为 0 —— 将永远不会被渲染成选中状态，因为 0 是一个类 false 的值（译注：在 checked 属性中，0 会被当成 false 处理）。

本组件的处理方法同样比其他的有趣。

handlePetSelection

如同所有处理方法一样，事件对象被传入方法，这样一来我们就能拿到事件对象的值（译注：准确来说，应该是事件目标元素的值）。我们将该值赋给newSelection 常量。接着我们在函数顶部附近定义 newSelectionArray 变量。因为我们将在一个 if/else 代码块里对该变量进行赋值，所以用 let 而非 const 来定义它。我们在代码块外部进行定义，这样一来被定义变量的作用域就是函数内部的最外沿，并且函数内的代码块都能访问到外部定义的变量。

该方法需要处理两种可能的情况。

如果 input 组件的值不在 selectedOptions 数组中，我们要将值添加进该数组。 如果 input 组件的值在 selectedOptions 数组中，我们要从数组中删除该值。

添加（第 8 - 10 行）： 为了将新值添加进选项数组，我们通过解构旧数组（数组前的三点...表示解构）创建一个新数组，并且将新值添加到数组的尾部 newSelectionArray = [...this.state.selectedPets, newSelection];。

注意，我们创建了一个新数组，而不是通过类似 .push() 的方法来改变原数组。不改变已存在的对象和数组，而是创建新的对象和数组，这在 React 中是又一个最佳实践。开发者这样做可以更容易地跟踪 state 的变化，而第三方 state 管理库，如 Redux 则可以做高性能的浅比较，而不是阻塞性能的深比较。

删除（第 6 - 8 行）：if 代码块借助此前用到的 .indexOf() 小技巧，检查选项是否在数组中。如果选项已经在数组中，通过.filter()方法，该选项将被移除。 该方法返回一个包含所有满足 filter 条件的元素的新数组（记住要避免在 React 直接修改数组或对象！）。

newSelectionArray 

在这种情况下，除了传入到方法中的选项之外，其他选项都会被返回。

<TextArea /> 组件

<TextArea />和我们已提到的那些组件非常相似，除了resize和rows，目前你应该对它的 props 很熟悉了。

TextArea

1. title：接收一个字符串，用以渲染文本域的 label 标签内容。
2. rows：接收一个整数，用来指定文本域的行数。
3. name：文本域的 name 属性。
4. content：文本域的内容。受控组件只会显示通过 props 传入的数据。
5. resize： 接受一个布尔值，用来指定文本域能否调整大小。
6. placeholder：充当文本域占位文本的字符串。
7. controlFunc： 它是从父组件或容器组件传下来的方法。因为该方法挂载在 React 的 onChange 处理方法上，所以每当改变选择框组件的值时，该方法都会被执行，从而更新父组件或容器组件的 state。

<TextArea /> 组件的完整代码：

import 

TextAreas />组件的控制方法和<SingleInput />如出一辙。细节部分请参考<SingleInput />组件。

表单操作

handleClearForm 和 handleFormSubmit 方法操作整个表单。

1. handleClearForm

既然我们在表单的各处都使用了单向数据流，那么清除表单数据对我们来说也是小菜一碟。<FormContainer /> 组件的 state 控制了每个表单元素的值。该容器的 state 通过 props 传入子组件。只有当 <FormContainer /> 组件的 state 改变时，表单组件显示的值才会改变。

清除表单子组件中显示的数据很简单，只要把容器的 state （译注：这里是指 state 对象上挂载的各个变量）设置成空数组和空字符串就可以了（如果有数字输入框的话则是将值设置成 0）。

handleClearForm

注意，e.preventDefault() 阻止了页面重新加载，接着 setState() 方法用来清除表单数据。

2. handleFormSubmit

为了提交表单数据，我们从 state 中抽取需要提交的属性值，创建了一个对象。接着使用 AJAX 库或技术将这些数据发送给 API（本文不包含此类内容）。

handleFormSubmit

请注意我们在提交数据后执行this.handleClearForm(e)清除了表单。

表单校验

受控表单组件非常适合自定义表单校验。假设要从<TextArea />组件中排除字母 "e"，可以这样做：

handleDescriptionChange

把 e.target.value 字符串分割成字母数组，就生成了上述的 textArray。这样字母 “e” （或其他设法排除的字母）就被过滤掉了。再把剩余的字母组成的数组拼成字符串，最后用该新字符串去设置组件 state。还不错吧？

以上代码放在本文的仓库中，但我将它们注释掉了，你可以按自己的需求自由地调整。

<FormContainer /> 组件

下面是我承诺给你们的<FormContainer />组件完整代码，

import 

总结

我承认用 React 构建受控表单组件要做一些重复劳动(比如容器组件中的处理方法)，但就你对应用的掌控度和 state 变更的透明度来说，预先投入精力是超值的。你的代码会变得可维护并且很高效。

如果想在我发布新文章时接到通知，你可以在博客的导航栏部分注册我的邮件发送清单。

作者：Loren Stewart
链接：玩转 React 表单 —— 受控组件详解
来源：知乎：学致编程