实现一个简单的表单 (Form) 组件，支持校验和提交

推荐答案

// www.javascriptcn.com code example
import React, { useState } from 'react';

const SimpleForm = () => {
  const [formData, setFormData] = useState({
    username: '',
    password: '',
  });
  const [errors, setErrors] = useState({});

  const validate = () => {
    const newErrors = {};
    if (!formData.username) {
      newErrors.username = 'Username is required';
    }
    if (!formData.password) {
      newErrors.password = 'Password is required';
    } else if (formData.password.length < 6) {
      newErrors.password = 'Password must be at least 6 characters';
    }
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (validate()) {
      console.log('Form submitted:', formData);
      // 这里可以添加提交表单的逻辑
    }
  };

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Username:</label>
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleChange}
        />
        {errors.username && <span>{errors.username}</span>}
      </div>
      <div>
        <label>Password:</label>
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
        />
        {errors.password && <span>{errors.password}</span>}
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default SimpleForm;

本题详细解读

1. 组件结构

• SimpleForm 组件：这是一个简单的表单组件，包含两个输入字段：username 和 password。
• formData 状态：使用 useState 来管理表单数据，formData 是一个对象，包含 username 和 password 两个字段。
• errors 状态：用于存储表单校验的错误信息，errors 是一个对象，键为字段名，值为错误信息。

2. 表单校验

• validate 函数：用于校验表单数据。如果 username 或 password 为空，或者 password 长度小于 6，则设置相应的错误信息。如果校验通过，返回 true，否则返回 false。
• setErrors：用于更新 errors 状态，显示校验错误信息。

3. 表单提交

• handleSubmit 函数：在表单提交时调用，首先阻止默认提交行为，然后调用 validate 函数进行校验。如果校验通过，则打印表单数据并执行提交逻辑。
• handleChange 函数：在输入框内容变化时调用，更新 formData 状态。

4. 表单渲染

• form 标签：包含两个输入框和一个提交按钮。
• input 标签：分别对应 username 和 password 字段，value 绑定到 formData 中的相应字段，onChange 事件绑定到 handleChange 函数。
• errors 显示：如果 errors 中有错误信息，则在输入框下方显示相应的错误提示。

5. 扩展性

• 该组件可以轻松扩展以支持更多的输入字段和更复杂的校验规则。
• 可以通过添加更多的 input 元素和相应的校验逻辑来实现更复杂的表单功能。