数据结构
网络
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 次浏览
广告