React.js 中的表单提交
介绍
在 React.js 组件中实现 HTML 表单提交时，其工作方式有所不同。通常，浏览器会呈现 HTML，并根据操作自动根据每个元素的name属性提交表单数据。尽管此默认行为在 React.js 中仍然有效，但强烈建议通过提供您自己的自定义控件来控制组件如何处理数据，从而以编程方式提交表单。
普通 HTML 表单提交
React.js 组件可以将 HTML 渲染回浏览器，所有规则仍然适用。为了说明这一点，请创建以下组件：
import React from 'react';
export default class FormSubmission extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<form action="https://www.youtube.com/results" method="GET">
<input type="text" name="search_query" />
<button type="submit">
Submit
</button>
</form>
</div>
);
}
}
按原样运行此代码将向 Youtube 的https://www.youtube.com/results端点提交，该端点需要一个search_query值参数，该参数已定义为输入元素的名称：
<input type="text" name="search_query" />
所有 HTML 规则仍然适用，用户将能够搜索 Youtube 的视频。React.js 只是渲染 HTML。
程序化表单提交
但是，React.js 的方式允许您完全控制要提交的数据。这也意味着您的代码将不依赖于 HTML 属性，而是依赖于组件逻辑中编写的任何内容。为了说明这一点，请将组件修改为如下所示：
import React from 'react';
export default class FormSubmission extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<input type="text" />
<button>
Submit
</button>
</div>
);
}
}
您可以在这里观察到一些主要的区别。
- 输入元素的name属性已被删除
- 整个表单不再包含在表单标签中
这里的关键思想是创建事件处理程序，以处理每次用户与表单元素交互时的变化或对变化做出反应。具体来说，这些将是更改输入元素中的文本并单击提交按钮。
输入事件处理
要为输入元素创建事件处理程序，首先声明一个名为searchQuery的状态值，由组件维护。状态值最初在构造函数中设置：
constructor(props) {
super(props);
this.state = {
searchQuery: ""
}
}
接下来，创建一个名为handleInputChanged的方法：
handleInputChanged(event) {
this.setState({
searchQuery: event.target.value
});
}
将事件处理函数附加到输入元素的onChange属性：
<input type="text" value={this.state.searchQuery} onChange={this.handleInputChanged.bind(this)}/>
输入框的值始终与this.state.searchQuery绑定。每次状态中的值更新时，它都会自动反映为输入框的值。
添加bind(this)函数是为了传递this并将其值保留为handleInputChanged函数中的组件实例。这将允许您调用setState来将searchQuery的状态值更新为event.target.value，这是调用时输入元素的当前值。此方法也适用于 HTML 的其他输入元素，而不仅适用于文本输入。
按钮事件处理
HTML 按钮通常会设置onClick属性，以便在按钮被点击时提供逻辑。与input类似，首先声明一个按钮点击函数：
handleButtonClicked() {
var searchQuery = this.state.searchQuery;
window.location.href = "https://youtube.com/results?search_query" + searchQuery;
}
由于您将向 Youtube 的端点提交数据，因此该函数的逻辑首先从组件的state获取searchQuery的当前值。任何 Javascript 逻辑都可以应用于此部分的表单提交，但为了简单起见，代码只是将search_query参数作为 URL 的一部分重定向到 Youtube 的端点。这模拟了与前面的基本示例类似的GET请求，只是现在您可以更好地控制传递的值以及如何提取这些值。
最后，将事件处理程序附加到按钮的onClick属性：
<button onClick={this.handleButtonClicked.bind(this)}>
Submit
</button>
总体代码
最终代码应如下所示：
import React from 'react';
export default class FormSubmission extends React.Component {
constructor(props) {
super(props);
this.state = {
searchQuery: ""
}
}
handleInputChanged(event) {
this.setState({
searchQuery: event.target.value
});
}
handleButtonClicked() {
var searchQuery = this.state.searchQuery;
window.location.href = "https://youtube.com/results?search_query" + searchQuery;
}
render() {
return (
<div>
<input type="text" value={this.state.searchQuery} onChange={this.handleInputChanged.bind(this)}/>
<button onClick={this.handleButtonClicked.bind(this)}>
Submit
</button>
</div>
);
}
}
结论
React.js 中的表单提交与 HTML 中通常的表单提交截然不同。React.js 让您可以完全控制传递给下一个可操作项的值，从而允许您格式化更复杂的数据结构。所有值都由组件的状态对象维护，并传播到渲染的元素（例如输入元素）。还需要事件处理程序来告诉应用程序如何对某些更改做出反应，例如修改输入或单击按钮。
接下来，您可以尝试应用以编程方式定义如何处理组件的每个输入元素的概念。除了文本之外，给定另一种类型的输入元素（即select、checkbox、radio和textarea），为其创建另一个状态变量，并编写与该输入元素绑定的相应事件处理程序函数。该函数的逻辑应该能够引用输入元素，获取其当前值，并相应地更新其相应的状态变量。
如果您有任何问题/疑虑，或者只是想聊聊编程方面的一般问题，请联系我@happyalampay！
了解更多
探索 Pluralsight 的这些 React 课程以继续学习：
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~