React 技术教程：使用 Hooks 实现表单验证

引言

在React应用中处理表单验证是常见的需求。在React 16.8之后，Hooks的引入让我们可以在函数组件中轻松使用状态和其他React特性。本文将详细讲解如何使用Hooks来实现一个基本的表单验证功能。

前提条件

了解React基本概念，如组件（Components）、状态（State）和属性（Props）。
熟悉Hooks，特别是`useState`和`useEffect`。

创建表单

首先，我们需要创建一个简单的表单组件。为了演示方便，我们将创建一个包含用户名和密码字段的登录表单。

import React, { useState } from 'react';

const LoginForm = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [errors, setErrors] = useState({});

    const handleSubmit = (e) => {
        e.preventDefault();
        // 在这里添加验证逻辑
    };

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label>
                    用户名：
                    <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
                </label>
                {errors.username && <span style={{color: 'red'}}>{errors.username}</span>}
            </div>
            <div>
                <label>
                    密码：
                    <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
                </label>
                {errors.password && <span style={{color: 'red'}}>{errors.password}</span>}
            </div>
            <button type="submit">登录</button>
        </form>
    );
};

export default LoginForm;

添加验证逻辑

在`handleSubmit`方法中，我们添加对用户名和密码的验证逻辑。例如，确保用户名和密码都不为空，并且用户名至少包含3个字符。

const handleSubmit = (e) => {
    e.preventDefault();
    let newErrors = {};

    if (username.trim() === '') {
        newErrors.username = '用户名不能为空';
    } else if (username.length < 3) {
        newErrors.username = '用户名至少需要3个字符';
    }

    if (password.trim() === '') {
        newErrors.password = '密码不能为空';
    }

    setErrors(newErrors);
    // 如果没有错误，则可以进行表单提交的逻辑
    if (Object.keys(newErrors).length === 0) {
        // 提交表单
        console.log('Form Submitted', { username, password });
    }
};

完整示例

下面是包含验证逻辑的完整表单组件代码。

import React, { useState } from 'react';

const LoginForm = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    const [errors, setErrors] = useState({});

    const handleSubmit = (e) => {
        e.preventDefault();
        let newErrors = {};

        if (username.trim() === '') {
            newErrors.username = '用户名不能为空';
        } else if (username.length < 3) {
            newErrors.username = '用户名至少需要3个字符';
        }

        if (password.trim() === '') {
            newErrors.password = '密码不能为空';
        }

        setErrors(newErrors);
        if (Object.keys(newErrors).length === 0) {
            // 提交表单的逻辑
            console.log('Form Submitted', { username, password });
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label>
                    用户名：
                    <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
                </label>
                {errors.username && <span style={{color: 'red'}}>{errors.username}</span>}
            </div>
            <div>
                <label>
                    密码：
                    <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
                </label>
                {errors.password && <span style={{color: 'red'}}>{errors.password}</span>}
            </div>
            <button type="submit">登录</button>
        </form>
    );
};

export default LoginForm;