react中获取表单输入值_快速React：如何在React中使用表单

最新推荐文章于 2024-05-14 14:35:02 发布

dingshi7798

最新推荐文章于 2024-05-14 14:35:02 发布

阅读量606

点赞数 1

文章标签： python java vue javascript html ViewUI

原文链接：https://www.sitepoint.com/work-with-forms-in-react/

版权

react中获取表单输入值

如何在React中使用表单是React Quickly的摘录，这是Azat Mardan的动手书，适合想要快速学习React.js的任何人。

本文介绍如何通过其他表单元素（例如input，textarea和option）捕获文本输入和输入。 与他们合作对于Web开发至关重要，因为它们使我们的应用程序能够接收用户的数据（例如文本）和操作（例如点击）。

本文示例的源代码位于GitHub存储库azat-co / react-quickly的ch07文件夹中。可以在http://reactquickly.co/demos上找到一些演示。

如果您喜欢这篇文章，您可能还想观看我们的课程“使用Redux构建React Forms” 。

在React中使用表单的推荐方式

在常规HTML中，当我们处理输入元素时，页面的DOM在其DOM节点中维护该元素的值。可以通过诸如document.getElementById('email').value方法或使用jQuery方法来访问该值。 DOM是我们的存储空间。

在React中，当使用表单或任何其他用户输入字段（例如独立文本字段或按钮）时，开发人员需要解决一个有趣的问题。从React的文档中：

React组件必须在任何时间点都代表视图状态，而不仅仅是在初始化时。

React就是通过使用声明式样式来描述UI来使事情变得简单。 React描述了UI，其最终阶段以及外观。

您能发现冲突吗？在传统HTML表单元素中，元素的状态将随用户输入而改变。 React使用声明性方法来描述UI。输入必须是动态的，以正确反映状态。

如果开发人员选择不维护组件状态（在JavaScript中）或不将其与视图同步，则会增加问题：内部状态和视图可能会有所不同。 React不会知道状态改变。这可能导致各种各样的麻烦，并且减轻了React的简单原理。最佳实践是使React的render()尽可能接近真实的DOM，并在表单元素中包含数据。

考虑文本输入字段的此示例。 React必须在该组件的render()包含新值。因此，我们需要使用value元素的值设置为新value 。如果我们像在HTML中一样一直实现一个<input>字段，React将使render()与真实DOM保持同步。 React不允许用户更改值。自己尝试。它让我发疯，但这是React的适当行为！

render() {
  return <input type="text" name="title" value="Mr." />
}

上面的代码表示任何状态下的视图，其值始终为“ Mr.”。对于输入字段，它们必须根据用户的击键而改变。考虑到这些要点，让我们使价值动态化。

这是一个更好的实现，因为它将从状态更新：

render() {
  return <input type="text" name="title" value={this.state.title} />
}

国家的价值是什么？ React无法得知用户输入表单元素。开发人员需要实现一个事件处理程序，以使用onChange捕获更改。

handleChange(event) {
  this.setState({title: event.target.value})
}
render() {
  return <input type="text" name="title" value={this.state.title} onChange={this.handleChange.bind(this)}/>
}

鉴于以上几点，最佳实践是开发人员实施以下操作以将内部状态与视图同步（图1）：

使用状态值在render()定义元素
在发生变化时使用onChange()捕获表单元素的变化
更新事件处理程序中的内部状态
在状态中保存新值，然后使用新的render（）更新视图

图1：捕获输入中的更改并将其应用于状态

乍看起来似乎需要做很多工作，但是我希望通过更多地使用React，您会喜欢这种方法的。之所以称为单向绑定 ，是因为状态仅会更改视图。没有回程，只有从州到国家的单程旅行。使用单向绑定，库将不会自动更新状态（或模型）。单向绑定的主要好处之一是，在使用大型应用程序时，它消除了复杂性，在大型应用程序中，许多视图可以隐式更新许多状态（数据模型），反之亦然-图2。

简单并不总是意味着更少的代码。有时，例如在这种情况下，开发人员必须编写额外的代码才能将事件处理程序中的数据手动设置为状态（呈现给视图），但是这种方法在涉及复杂的用户界面和单页应用程序时往往更为出色。具有无数的观点和状态。简而言之：简单并不总是那么容易。

图2：单向绑定与双向绑定

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

相反，双向绑定允许视图自动更改状态，而无需开发人员明确实现它。双向绑定是Angular 1的工作方式。有趣的是，Angular 2借鉴了React的单向绑定的概念，并将其设置为默认值（您仍然可以明确地拥有双向绑定）。

在React中定义表单及其事件

我们将从<form>元素开始。通常，我们不希望我们的输入元素随机悬挂在DOM中。如果我们有许多功能不同的输入集，这可能会变得很糟糕。相反，我们将具有共同用途的输入元素包装在<form></form>元素中。

不需要<form>包装器。在简单的用户界面中单独使用表单元素是完全可以的。在更复杂的UI中，开发人员可能在单个页面上包含多个元素组。在这种情况下，对每个组使用<form>是明智的。 React的<form>呈现在HTML <form> ，无论我们将什么规则应用于React的<form>元素。根据HTML5规范，开发人员不应嵌套表单（它表示内容是流内容，但没有<form>元素后代）。

表单元素本身可以具有事件。除标准React DOM事件外，React还支持三种表单事件：

onChange ：当表单的任何输入元素发生更改时触发。
onInput ：触发<textarea>和<input>元素值的每次更改。 React团队不建议使用它（见下文）。
onSubmit ：在提交表单时触发，通常是按Enter 。

onChange与onInput

与DOM的change事件相反，React的onChange会在每次更改时触发，而DOM的change事件可能不会在每次值更改时触发，但会在失去焦点时触发。例如，对于<input type="text"> ，用户可以不使用onChange进行键入，并且只有在用户按下tab键或将鼠标移到另一个元素上单击（失去焦点）之后， onChange才会以HTML格式触发（常规浏览器事件）。如前所述，在React中， onChange会在每次击键时触发，而不仅仅是失去焦点。

在另一方面， onInput在阵营是DOM的包装onInput ，每个变化，这火灾。 React团队建议在onInput使用onChange 。

底线是，作出React的onChange作品从不同onChange在HTML中，它更是一致的（多像HTML的onInput ）。 onChange是在每次更改时触发的，而不是在失去焦点时触发的。

React中推荐的方法是使用onChange ，并且仅在需要访问onInput事件的本机行为时才使用onInput 。原因是React的onChange包装器行为提供了一致性。

React事件

除了上面列出的三个事件， <form>可以具有标准的React事件，例如onKeyUp或onClick 。当我们需要捕获整个表单（一组输入元素）的特定事件时，使用表单事件可能会派上用场。

例如，允许用户在按回车键时提交数据是一个很好的UX（假设您不在textarea字段中，在这种情况下， 回车键应创建一个新行）。我们可以通过创建触发this.handleSubmit()的事件侦听器来侦听表单提交事件。

handleSubmit(event) {
  …
}
render() {
  <form onSubmit={this.handleSubmit}>
    <input type="text" name="email" />
  </form>
}

请注意 ：与其他事件一样，我们需要在render()外部实现handleSubmit函数。 React没有任何命名约定，只要您可以理解并保持一致，就可以为事件处理程序命名。现在，我们将遵循最流行的约定，即在事件处理程序的前面加上单词handle以将其与常规类方法区分开。

提醒一下，设置事件处理程序时，请勿调用方法（不要使用括号），也不要在花括号周围使用双引号（正确的方式： EVENT={this.METHOD} ）。我知道对于某些读者来说，它是基本JavaScript和简单易懂的代码，但是您不相信我在React代码中见过多少次与这两个误解有关的错误：我们传递函数的定义，而不是结果，并且使用curl大括号作为JSX属性的值。

在enter上实现表单提交的另一种方法是通过手动侦听key up事件（ onKeyUp ）并检查密钥代码（ enter的 13）。

handleKeyUp(event) {
  if (event.keyCode == 13) return this.sendData()
}
render() {
  return <form onKeyUp={this.handleKeyUp}>
  ...
  </form>
}

请注意， sendData方法在代码的其他地方实现。另外，我们需要在constructor() bind(this)事件处理程序。

总而言之，我们可以在form元素上发生事件，而不仅仅是在表单中的单个元素上发生事件。

目前为止就这样了！有关更多信息，请免费下载React Quick第一章。

有关React的更多信息，请查看我们的迷你课程“使用Redux构建React Forms” 。 本课程将介绍React和Redux中表单的基础知识，介绍Redux Form的价值，并介绍使用Redux Form创建表单的基础知识。 除此之外，您还将了解使用Redux Form创建的表单的验证以及错误消息的管理，使您能够构建健壮的表单，同时保留保存表单项状态的能力。 要让您品尝一下商店中的商品，请查看下面的免费课程。

正在加载播放器…