React onSubmit

Rana Hasnain Khan 2022年5月18日
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