当前位置:   article > 正文

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

layui form-container

5624b0d7c7d58393807af5ed903652d1.png
  • 原文地址: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 表单 —— 受控组件详解
来源:知乎:学致编程
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/115718
推荐阅读
相关标签
  

闽ICP备14008679号