React教程第23部分：第一个表单课程

在React教程的翻译的这一部分中，我们将讨论使用表单。 特别是，今天的课程专门用于组织组件和文本字段的交互。



→ 第1部分：课程概述，React，ReactDOM和JSX普及的原因
→ 第2部分：功能组件
→ 第3部分：组件文件，项目结构
→ 第4部分：父级和子级组件
→ 第5部分：TODO应用程序的开始工作，样式设计的基础
→ 第6部分：关于本课程的一些功能，JSX和JavaScript
→ 第7部分：内联样式
→ 第8部分：继续研究TODO应用程序，熟悉组件的属性
→ 第9部分：组件属性
→ 第10部分：使用组件特性和样式的研讨会
→ 第11部分：动态标记生成和映射数组方法
→ 第12部分：研讨会，TODO应用程序的第三阶段工作
→ 第13部分：基于类的组件
→ 第14部分：关于基于类的组件，组件状态的研讨会
→ 第15部分：组件健康研讨会
→ 第16部分：TODO应用程序的第四阶段工作，事件处理
→ 第17部分：TODO应用程序的第五阶段工作，修改组件的状态
→ 第18部分：TODO应用程序的第六阶段工作
→ 第19部分：组件生命周期方法
第20部分：条件渲染的第一课
→ 第21部分：关于条件渲染的第二课​​和研讨会
→ 第22部分：TODO应用程序的第七阶段工作，从外部资源下载数据
→ 第23部分：关于使用表格的第一课
→ 第24部分：第二形式课
→ 第25部分：使用表单的研讨会
→ 第26部分：应用程序体系结构，容器/组件模式
→ 第27部分：课程项目

课41.处理表单，第1部分

→ 原创

表单是Web应用程序的重要组成部分。 但是，事实证明，参与React开发，使用表单的人员通常会遇到某些困难。 事实是，React以特殊方式处理表单。 在本课程中，我们将使用由create-react-app创建的标准项目，其初始形式如下所示。

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {}   }     render() {       return (           <div>               Code goes here           </div>       )   } } export default App 

请注意，为了掌握本课程的内容，您必须熟悉应用程序状态的概念。 如果您已经完成了本课程的所有先前课程，并且分别完成了讲习班，那么这意味着您已经具备了所需要的知识。 这是表单上的React文档。 建议您先看她再继续。

因此，在React中，表单的工作方式与使用常规JavaScript有所不同。 即，在通常的方法中，表单是使用Web页面上的HTML描述的，然后，使用DOM API从JavaScript与表单进行交互。 特别是，通过单击“提交”按钮，他们从用户填写的字段中收集数据，并准备将其发送到服务器，进行检查，并在必要时通知用户他错误地填写了一些字段。 在React中，与其等待所有材料输入表单字段，然后再进行软件处理，不如使用应用程序的状态来持续监视数据。 例如，这归结为以下事实：用户从键盘输入的每个字符立即进入状态。 因此，在React应用程序中，我们可以快速处理用户在表单字段中输入的最新版本。 为了在实践中证明这个想法，我们从包含常规文本字段的表单描述开始。

为此，在render()方法返回的代码中，我们描述了表单。 在通常的方法中，这样的表格将具有一个按钮，通过单击该按钮，应用程序的程序机制将开始处理输入到该表格中的数据。 在我们的情况下，用户在字段中输入的数据将在输入时进入应用程序。 为此，我们需要处理onChange字段onChange 。 在此事件的处理程序中（我们将其handleChange() ），我们将通过向状态写入在字段中输入的内容来更新状态。 为此，我们首先需要找出字段中包含的内容，其次要将该数据置于一种状态。 在该状态下，创建一个存储字段内容的属性。 我们将使用此字段存储用户的名字，因此我们将调用相应的属性firstName并使用空字符串对其进行初始化。

之后，在构造函数中，我们将handleChange()事件处理程序附加handleChange()函数，在处理程序代码中，我们将使用setState()函数。 由于我们不关心存储在firstName状态属性中的先前值，因此我们可以简单地将具有新firstName值的对象传递给此函数。 该属性应写什么？

如果回想一下事件处理程序在JavaScript中的工作方式，那么事实证明，在调用事件处理程序时，会为它们传递一些预定义的参数。 在我们的例子中，事件对象被传递给处理程序。 它包含我们感兴趣的数据。 我们正在处理其onChange事件的文本字段在此对象中表示为event.target 。 并且可以使用event.target.value构造访问此字段的内容。

现在，在render()方法中，我们将输出将存储在状态中的内容，并查看得到的内容。

这是实现以上想法的代码。

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           firstName: ""       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(event) {       this.setState({           firstName: event.target.value       })   }     render() {       return (           <form>               <input type="text" placeholder="First Name" onChange={this.handleChange} />               <h1>{this.state.firstName}</h1>           </form>       )   } } export default App 

这就是浏览器中的所有外观。


浏览器中的应用程序页面

在该字段中输入的每个字符都会立即出现在页面上的<h1>元素中。

现在，让我们考虑如何为用户的姓氏向表单添加另一个字段。 显然，为了建立对在此字段中输入的数据的正确处理，我们将需要向状态添加另一个属性，并研究在字段中输入数据时更新状态的机制。

解决此问题的一种方法是为新字段创建一个单独的事件处理程序。 对于具有多个输入字段的小型表单，这是一种完全正常的方法，但是如果我们谈论的是具有数十个字段的表单，则为它们中的每一个创建单独的onChange事件处理程序并不是一个好主意。

为了在更改同一事件处理程序时区分字段，我们将name属性分配给字段，这将使它们与用于以状态存储字段数据的属性名称（ firstName和lastName ）完全相同。 之后，我们可以使用传递给处理程序的事件对象，找出字段名称，导致其调用的更改，并使用此名称。 我们将通过设置要在其中添加更新数据的state属性的名称来使用它。 这是实现此功能的代码：

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           firstName: "",           lastName: ""       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(event) {       this.setState({           [event.target.name]: event.target.value       })   }     render() {       return (           <form>               <input type="text" name="firstName" placeholder="First Name" onChange={this.handleChange} />               <br />               <input type="text" name="lastName" placeholder="Last Name" onChange={this.handleChange} />               <h1>{this.state.firstName} {this.state.lastName}</h1>           </form>       )   } } export default App 

请注意，通过设置传递给setState()的对象的属性名称，我们setState() event.target.name构造setState()在方括号中。


浏览器中的应用程序页面

现在，该页面显示在第一个字段中输入的内容和在第二个字段中输入的内容。

我们刚刚检查过的使用文本字段的原理对于基于它们的其他字段也有效。 例如，这些可以是用于输入电子邮件地址，电话，号码的字段。 可以使用上面讨论的机制来处理输入到此类字段中的数据，对于这些操作而言，重要的是，字段名称与存储这些字段数据的组件状态下的属性名称相对应。

在下一课中，我们将讨论使用其他表单元素。 在这里，我们将讨论另一个与所谓的“受控组件”相关的主题，如果您查看表单上的React 文档 ，您已经阅读了该主题。

如果我们希望字段中显示的内容与应用程序状态中存储的内容完全对应，则可以使用上述方法，其中当您在字段中输入数据时更新状态。 该条件是反应性的。 而且，当使用作为托管组件的表单元素时，这些元素中显示的内容由状态控制。 通过这种方法，它才是真正成分数据的唯一来源。 为了实现此目的，将value属性添加到描述表单元素的代码中就足够了，该代码指示与该字段相对应的state属性。 这是应用程序代码现在的样子。

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           firstName: "",           lastName: ""       }       this.handleChange = this.handleChange.bind(this)   }     handleChange(event) {       this.setState({           [event.target.name]: event.target.value       })   }     render() {       return (           <form>               <input                   type="text"                   value={this.state.firstName}                   name="firstName"                   placeholder="First Name"                   onChange={this.handleChange}               />               <br />               <input                   type="text"                   value={this.state.lastName}                   name="lastName"                   placeholder="Last Name"                   onChange={this.handleChange}               />               <h1>{this.state.firstName} {this.state.lastName}</h1>           </form>       )   } } export default App 

完成这些更改后，该应用程序将像以前一样正常工作。 与先前版本的主要区别在于，该字段显示状态中存储的内容。

我想提供一条建议，该建议将在将来避免您很难调试的错误。 这是onChange事件处理程序代码现在的样子：

 handleChange(event) {   this.setState({       [event.target.name]: event.target.value   }) } 

建议在构造传递给setState()对象时，不要直接访问event对象的属性，而应提前从中提取所需的内容：

 handleChange(event) {   const {name, value} = event.target   this.setState({       [name]: value   }) } 

在这里，我们不会详细介绍通过以这种方式构造事件处理程序可以避免的错误。 如果您有兴趣，请查看React文档中的SyntheticEvent 。

总结

在本课程中，您首先熟悉了React中使用表单的机制。 下次我们将继续该主题。

亲爱的读者们！ 在React中使用表单时是否使用任何其他库？