React onSubmit

Rana Hasnain Khan 2024年2月15日

React React Methods

我们将演示如何在 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;
}

输出：

react onsubmit 示例

我们可以轻松地使用 onSubmit 方法在 React 中提交任何表单，获取该表单的值，并按照这些简单的步骤存储它。

你可以在此处查看完整代码。

作者： Rana Hasnain Khan

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

在 React 中使用 onSubmit 方法提交任何表单

在 React 中使用 `onSubmit` 方法提交任何表单