如果 React 中错误状态为 true，则阻止提交

Question

如果错误状态当前为 true，我会尝试阻止表单提交数据。现在，如果出现错误，它会激活输入和标签上的错误样式，但数据仍然会发送。如果错误状态为 true，我尝试禁用提交按钮，但当错误状态为 false 时我无法启用该按钮，因为该按钮被卡在禁用状态，从而使错误状态保持为 true。

我正在尝试启用按钮来验证输入，但如果错误状态为 true，则停止提交数据。

import { useState } from "react";

function TopForm({ callback }) {
const [error, setError] = useState(false);

const [dayText, setDayText] = useState("");
const [monthText, setMonthText] = useState("");
const [yearText, setYearText] = useState("");
const currentDate = new Date();
let currentYear = currentDate.getFullYear();

function verifyDate() {
    if (dayText > 31 || dayText < 1) {
        setError(true);
    } else {
        setError(false);
    }

    if (monthText > 12 || monthText < 1) {
        setError(true);
    } else {
        setError(false);
    }

    if (yearText > currentYear || yearText < 1900) {
        setError(true);
    } else {
        setError(false);
    }
}

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

    setDayText("");
    setMonthText("");
    setYearText("");
};

return (
    // Inputs Container
    <form onSubmit={handleSubmit}>
        {/* Upper Form */}
        <div className="container flex justify-center gap-4 md:max-w-lg">
            <div className="container w-1/3 flex flex-col">
                <label
                    htmlFor="day"
                    className={
                        error
                            ? "text-red-400 text-sm mb-1 uppercase tracking-wide"
                            : "text-smokey-grey text-sm mb-1 uppercase tracking-wide"
                    }
                    id="day-label"
                >
                    Day
                </label>
                <input
                    type="number"
                    name="day"
                    id="day"
                    required
                    className={
                        error
                            ? "border-solid border-2 border-red-400 rounded-md p-3 text-lg outline-none focus:border-red-600"
                            : "border-solid border-2 border-light-grey rounded-md p-3 text-lg outline-none focus:border-purple"
                    }
                    onChange={(event) => setDayText(event.target.value)}
                    value={dayText}
                />
                <div
                    id="day-error"
                    className={
                        error
                            ? " text-xs text-red-400 mt-2"
                            : "hidden text-xs text-red-400 mt-2"
                    }
                >
                    Must be a valid date
                </div>
            </div>

            <div className="container w-1/3 flex flex-col">
                <label
                    htmlFor="month"
                    id="month-label"
                    className={
                        error
                            ? "text-red-400 text-sm mb-1 uppercase tracking-wide"
                            : "text-smokey-grey text-sm mb-1 uppercase tracking-wide"
                    }
                >
                    Month
                </label>
                <input
                    type="number"
                    name="month"
                    id="month"
                    required
                    className={
                        error
                            ? "border-solid border-2 border-red-400 rounded-md p-3 text-lg outline-none focus:border-red-600"
                            : "border-solid border-2 border-light-grey rounded-md p-3 text-lg outline-none focus:border-purple"
                    }
                    onChange={(event) => setMonthText(event.target.value)}
                    value={monthText}
                />
                <div
                    id="month-error"
                    className="hidden text-xs text-red-400 mt-2"
                >
                    Must be a valid date
                </div>
            </div>

            <div className="container w-1/3 flex flex-col">
                <label
                    htmlFor="year"
                    id="year-label"
                    className={
                        error
                            ? "text-red-400 text-sm mb-1 uppercase tracking-wide"
                            : "text-smokey-grey text-sm mb-1 uppercase tracking-wide"
                    }
                >
                    Year
                </label>
                <input
                    type="number"
                    name="year"
                    id="year"
                    required
                    className={
                        error
                            ? "border-solid border-2 border-red-400 rounded-md p-3 text-lg outline-none focus:border-red-600"
                            : "border-solid border-2 border-light-grey rounded-md p-3 text-lg outline-none focus:border-purple"
                    }
                    onChange={(event) => setYearText(event.target.value)}
                    value={yearText}
                />
                <div
                    id="year-error"
                    className="hidden text-xs text-red-400 mt-2"
                >
                    Must be a valid date
                </div>
            </div>
        </div>

        {/* Line Arrow Container */}
        <div className="container my-20 flex justify-center relative">
            <hr className="border-light-grey w-full" />
            <button
                id="button"
                className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-purple disabled:bg-smokey-grey  w-16 h-16 rounded-full flex items-center justify-center hover:scale-125 transition-all"
                type="submit"
                onClick={() => {
                    callback[0](dayText);
                    callback[1](monthText);
                    callback[2](yearText);
                    verifyDate();
                }}
            >
                <img
                    src="/images/icon-arrow.svg"
                    alt="arrow"
                    className="w-6"
                />
            </button>
        </div>
    </form>
);
}

export default TopForm;

Answer 1

您只需这样做：

const handleSubmit = (event) => {
    event.preventDefault();
    if (!error) return;

    // Send data...
    
    // Reset inputs...
    setDayText("");
    setMonthText("");
    setYearText("");
};