ReactJS 中的表单处理
reactjsweb developmentfront end technology更新于 2026/1/26 16:52:17
在本文中，我们将了解如何在 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;
在上面的例子中，我们获取用户的输入并将其存储在应用程序的状态中。如果用户输入的电话号码不是数字类型，则会显示错误消息。
输出
这将产生以下结果。
