React 实现表单组件的示例代码

　　import {useState} from "react";

　　/**

　　* 表单组件

　　* @param initial_data 初始数据

　　* @param validators 校验器

　　* @param submitFunc 提交函数

　　* @param children FormItem组件列表

　　*/

　　const Form = ({initial_data, validators, submitFunc, children}) => {

　　/**

　　* 表单数据状态

　　*/

　　const [formData, setFormData] = useState(initial_data);

　　/**

　　* 表单错误状态

　　*/

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

　　/**

　　* 表单数据变更处理函数

　　*/

　　const setFieldData = (name, value) => {

　　// 进行参数校验

　　if (validators && validators[name]) {

　　const error = validators[name](value);

　　if (error) {

　　setErrors((errors) => ({...errors, [name]: error}));

　　return;

　　}

　　setErrors((errors) => {

　　const newErrors = {...errors};

　　delete newErrors[name];

　　return newErrors;

　　})

　　}

　　// 更新表单数据

　　setFormData({

　　...formData,

　　[name]: value

　　});

　　}

　　/**

　　* 表单提交处理函数

　　*/

　　const handleSubmit = (e) => {

　　e.preventDefault();

　　if (errors && Object.keys(errors).length > 0) {

　　console.log('表单校验未通过');

　　return;

　　}

　　if (submitFunc) {

　　console.log('开始执行提交函数');

　　submitFunc(formData);

　　}

　　}

　　return (

　　<>

　　)

　　}

　　/**

　　* 表单项组件

　　*/

　　const FormItem = ({name, type, error, label, fieldData, setFieldData}) => {

　　if (type === 'submit') {

　　return (

　　)

　　} else if (type === 'text') {

　　return (

　　)

　　} else if (type === 'password') {

　　return (

　　}

　　return null;

　　}

　　export {Form, FormItem};