React.js 表单组件内容校验与获取

在 React 中，可以使用useState 钩子来跟踪表单的当前内容，并使用useEffect 钩子来监听表单内容的变化。然后，可以使用表单验证库（如yup 或joi）来进行内容校验。

以下是一个示例代码，演示了如何获取表单内容并进行校验：

import React, { useState, useEffect } from 'react';
import * as Yup from 'yup'; // 导入yup库，用于表单验证

const validationSchema = Yup.object().shape({
  name: Yup.string().required('姓名是必填项'),
  email: Yup.string().email('请输入有效的电子邮件地址').required('电子邮件是必填项'),
});

const FormComponent = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
  });

  const [errors, setErrors] = useState({});

  useEffect(() => {
    validateForm(); // 每次formData变化时进行表单验证
  }, [formData]);

  const validateForm = async () => {
    try {
      await validationSchema.validate(formData, { abortEarly: false });
      setErrors({}); // 如果验证通过，清空错误对象
    } catch (error) {
      const validationErrors = {};
      error.inner.forEach((err) => {
        validationErrors[err.path] = err.message; // 将错误信息存储在validationErrors对象中
      });
      setErrors(validationErrors); // 设置错误对象
    }  
  };

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value, // 更新formData对象中对应的属性值
    }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    validateForm(); // 在提交表单时再次进行一次验证
    // 如果没有错误，则可以继续处理表单提交
    if (Object.keys(errors).length === 0) {
      // 处理表单提交
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">姓名：</label>
        <input
          type="text"
          id="name"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
        {errors.name && <div>{errors.name}</div>} {/* 显示错误信息 */}
      </div>
      <div>
        <label htmlFor="email">电子邮件：</label>
        <input
          type="text"
          id="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
        {errors.email && <div>{errors.email}</div>} {/* 显示错误信息 */}
      </div>
      <button type="submit">提交</button>
    </form>
  );
};

export default FormComponent;

在上面的示例代码中，useState 钩子用于创建一个formData 对象来保存表单的当前内容。useEffect 钩子监听formData 的变化，并在每次变化时调用validateForm 函数进行表单验证。validateForm 函数使用Yup 库对formData 进行验证，并根据验证结果设置errors 对象来保存错误信息。handleChange 函数用于更新formData 对象的属性值。handleSubmit 函数在表单提交时再次调用validateForm 函数进行一次验证，并根据errors 对象来处理表单提交。