資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時裝研究
法律研究ReactJS 中的表單處理
在本文中，我們將瞭解如何在 React 應用中正確處理表單。
在構建真實的 React 應用時，表單處理是最關鍵的部分之一。它涉及獲取使用者輸入、對其進行驗證，以及顯示使用者提交的資料中存在的錯誤。
示例
在此示例中，我們將構建一個資訊頁面，它將獲取使用者的資訊、對其進行驗證，並相應顯示結果。
這裡，我們將 App.js 作為 Details.js 元件的父元件。
Details.js
import React, { useState } from 'react';
const Details = () => {
const [name, setName] = useState('');
const [number, setNumber] = useState(null);
const [mssg, setMssg] = useState(null);
const submit = (e) => {
e.preventDefault();
if (!Number(number)) {
setMssg('Phone Number should be of number type only');
} else {
setMssg('Form Submitted!');
}
};
return (
<form onSubmit={submit}>
<input
placeholder="Name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<input
placeholder="Phone Number"
value={number}
onChange={(e) => setNumber(e.target.value)}
/>
<button>Submit</button>
{mssg}
</form>
);
};
export default Details;App.js
import React from 'react';
import Details from './Details';
const App = () => {
return (
<div>
<h1>Information Page:</h1>
<Details />
</div>
);
};
export default App;在上例中，我們從使用者那裡獲取輸入，並將其儲存在應用程式狀態中。如果使用者輸入的電話號碼不是數字型別，則會顯示錯誤訊息。
輸出
將產生以下結果。
更新於：2021 年 3 月 18 日
511 次瀏覽
廣告