Question

我想在提交之前验证反应表单中的信息。在这里，我设置了一个自定义反应钩子，我在其中实现了更改处理和表单提交：

import { useState } from 'react';
import Axios from 'axios';

const useForm = (validate) => {

    const [values, setValues] = useState({
        name: '',
        email: '',
        subject: '',
        message: '',
        disabled: null,
        emailSent: null
    });

    // Handles user input data
    const handleChange = (event) => {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        setValues ({
            ...values,
            [name] : value
        });
    }

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

    const [isSending, setIsSending] = useState(false);

    
    const handleSubmit = (event) => {
        event.preventDefault();

        setErrors(validate(values));

        setValues({
            disabled: true
        })

        if (errors.length === 0) {

            setIsSending(true);

            // Sends POST request to the API endpoint with the given data and returns sending status
            Axios.post('http://localhost:3030/email/send', values)
            .then(res => {
                if(res.data.success) {
                    this.setValues({
                        disabled: false,
                        emailSent: true
                    });
                    this.setIsSending(false);
                } else {
                    this.setValues({
                        disabled: false,
                        emailSent: false
                    });
                    this.setIsSending(false);
                } 
            })
            .catch(err => {
                setValues({
                    disabled: false,
                    emailSent: false
                });
                setIsSending(false);
            });
        } else {
            setValues({
                disabled: false
            })
        }
    }

    return { handleChange, handleSubmit, values, errors, isSending };

}

export default useForm;

验证钩子是这样的：

export default function validateInfo(values) {
    let errors = {};

    // Full Name validation
    if (values.name === '') {
        errors.name = 'Name is required';
    }

    // Email validation
    if (values.email === '') {
        errors.email = 'Email address is required';
    } else if (!/\S+@\S+\.\S+/.test(values.email)) {
        errors.email = 'Please enter a valid email address';
    }

    // Subject validation
    if (values.subject === '') {
        errors.subject = 'Subject is required';
    }

    // Message validation
    if (values.message === '') {
        errors.message = 'Please, leave me a message';
    }

    return errors;
}

当我调试应用程序时，我可以看到 FormControl 在单击提交后将值从已定义（默认“”或任何数据）更改为“未定义”，这意味着该组件正在强制输入从 Controlled 更改到不受控制，换句话说，它不控制该字段，并且还重置错误值。

我确定问题出在 handleChange() 上，但我觉得一切正常，我将非常感谢您的帮助。

Answer 1

也许在 handleSubmit 中您错过了点差值？

    setValues({
     ...values,
     disabled: true,
    });

验证 + 提交后，React 输入值从已定义更改为未定义

1 个答案: