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` 方法提交任何表單