HOWTO · React
React onSubmit
本教程演示了 React 中的 onSubmit 方法。
本页内容
我们将演示如何在 React 中使用带有按钮的 onSubmit 方法。
在 React 中使用 onSubmit 方法提交任何表单
onSubmit 方法允许在 submit 事件触发时执行该函数。
我们在所有表单中使用 onSubmit 方法来使用表单将数据表单用户提交到我们的数据库。
它是表格的主要部分之一。随着管理系统时代的到来，几乎每个网站和 Web 应用程序都有表单和几乎所有这些表单中的 onSubmit 方法。
本教程将讨论如何在我们的 React 应用程序中使用 onSubmit 和按钮，并将输入字段的数据与提交请求绑定。
让我们使用以下命令创建一个新的 React 应用程序。
# react
npx create-react-app my-app
在 React 中创建我们的新应用程序后，我们将使用此命令转到我们的应用程序目录。
# react
cd my-app
现在，让我们运行我们的应用程序来检查所有依赖项是否安装正确。
# react
npm start
在我们的 App.js 文件中，我们将使用 export default class App extends React.Component 而不是使用 export default function App()。
在我们的 App 类中，我们将使用 state 来定义我们将从用户输入中获取的 yourname 变量。
在 return 中，我们将使用 onSubmit 方法创建一个表单来调用函数 onSubmitEvent。在表单内部，我们将有一个输入字段，它将用户名作为输入。
我们将有一个类型为 submit 的按钮，它将触发表单提交。
# react
<>
<form onSubmit={this.onSubmitEvent}>
<input
type="text"
name="yourname"
placeholder="Enter Your Name"
onChange={this.onChange}
/>
<button type="submit">Save</button>
</form>
</>
我们将创建 2 个函数，onChange 和 onSubmitEvent，它们将使用 setState 将输入值设置为我们的变量 yourname。
因此，我们在 App.js 中的代码将如下所示。
# react
import React from "react";
import "./styles.css";
export default class App extends React.Component {
state = {
yourname: ""
};
onChange = (e) => {
this.setState({
[e.target.name]: e.target.value
});
};
onSubmitEvent = (e) => {
e.preventDefault();
const { yourname } = this.state;
console.log("Hello " + yourname + "!");
};
render() {
return (
<>
<form onSubmit={this.onSubmitEvent}>
<input
type="text"
name="yourname"
placeholder="Enter Your Name"
onChange={this.onChange}
/>
<button type="submit">Save</button>
</form>
</>
);
}
}
我们将添加一些 CSS 来更改我们的表单输入字段和按钮。
# react
.App {
font-family: sans-serif;
text-align: center;
}
input{
padding: 5px;
color: black;
border: none;
border-bottom: 1px solid black;
margin-right: 10px;
}
button{
background: black;
padding: 10px;
border: none;
color: white;
}
button:hover{
background: white;
border: 1px solid black;
color: black;
}
输出：
我们可以轻松地使用 onSubmit 方法在 React 中提交任何表单，获取该表单的值，并按照这些简单的步骤存储它。
你可以在此处查看完整代码。
