React onSubmit

Rana Hasnain Khan 2024年2月15日
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 个函数,onChangeonSubmitEvent,它们将使用 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 avatar Rana Hasnain Khan avatar

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.

LinkedIn