React/AntDesign 觸發 Form.Item 事件重新驗證

Question

問題背景

我正在使用功能組件內的 AntDesign 表單收集用戶輸入。 用戶必須觀看視頻剪輯並確定視頻中某些事件發生的相對時間段，該時間段由 (HH:MM:SS) - (HH:MM:SS) 形式的“開始時間”和“結束時間”組成)，例如 00:05:30 - 00:05:35（5 秒時間段）。

用於收集此數據的 Form 由兩個 <Form.Items> 組成。 一個收集開始時間，另一個收集結束時間。 （對於如何構造表單，還有其他情況，因此在這種情況下，Form.Items 作為 JSX 返回以包裝在渲染方法中的 Form 中。）像這樣：

const timeInput = () => {
    return (
        <>
        <Form.Item
            name={"start-time"}
            hasFeedback
            rules={[
                {
                    required: true,
                    message: 'Required',
                },
                ({ getFieldValue }) => ({
                    validator(_, value) {
                        return startTimeInputValidator(getFieldValue, "end-time", value)
                    }
                })
            ]}
        >
        <Input 
        id="start-time-input"
        placeholder={"Start Time (HH:MM:SS)"} />
        </Form.Item>

        <Form.Item
            name={"end-time"}
            hasFeedback
            rules={[
                {
                    required: true,
                    message: 'Required',
                },
                ({ getFieldValue }) => ({
                    validator(_, value) {
                        return endTimeInputValidator(getFieldValue, "start-time", value)
                    }
                })
            ]}
        >
        <Input 
        id="end-time-input"
        placeholder={"End Time (HH:MM:SS)"} />
        </Form.Item>
        </>
    )        
}

每個表單項的輸入都使用從單獨文件導入的自定義驗證器進行驗證：

const regexTime = /^(?:[01]\d|2[0123]):(?:[012345]\d):(?:[012345]\d)$/;
const timeInvalidDesc = "Not a Valid Time!";
const doStartTimeDesc = "Start Time Invalid!";
const timeMismatchDesc = "End Time must be after Start Time!";

export async function startTimeInputValidator(getFieldValue, field, text) {
    var endTime = getFieldValue(field);
    if (!text) {
        return Promise.resolve();
    }
    if(text.length<8) {
        return Promise.reject();
    }
    if (!regexTime.test(text)) {
        return Promise.reject(new Error(timeInvalidDesc));
    }
    if(regexTime.test(endTime)) {
        let stn = timeToInt(text);
        let etn = timeToInt(endTime);
        if(stn > etn) {
            return Promise.reject(new Error(timeMismatchDesc));
        }
    }
    return Promise.resolve();
}

export async function endTimeInputValidator(getFieldValue, field, text) {
    var startTime = getFieldValue(field);
    if (!text) {
        return Promise.resolve();
    }
    if(text.length<8) {
        return Promise.reject();
    }
    if (!regexTime.test(text)) {
        return Promise.reject(new Error(timeInvalidDesc));
    }
    if (!regexTime.test(startTime)) {
        return Promise.reject(new Error(doStartTimeDesc));
    }
    let stn = timeToInt(startTime);
    let etn = timeToInt(text);
    if(stn > etn) {
        return Promise.reject(new Error(timeMismatchDesc));
    }
    return Promise.resolve();
}

驗證器正確地確保用戶以“HH:MM:SS”的形式輸入了有效時間，並且他們還正確地確保“結束時間”不在“開始時間”之前，也就是說，這是不可能的如果“結束時間”早於“開始時間”，則提交表單，因為我假設當用戶提交表單時，字段會被重新驗證。

當用戶出現問題時：

1. 輸入有效的“開始時間”（不完整的表格）
   • 例如：00:00:05 - 空
2. 輸入有效的“結束時間”（有效的完整表格）
   • 例如：00:00:05 - 00:00:10
3. 將“開始時間”更改為“結束時間”之后（無效的完整表格）
   • 例如：00:00:15 - 00:00:10
4. 將“結束時間”更改為在新的“開始時間”之后（應該是有效的完整表格）
   • 例如：00:00:15 - 00:00:20

現在，在上述情況下，鑒於輸入有效且時間順序正確，表單不應顯示錯誤消息，但它仍會顯示開始時間字段的錯誤消息，因為在第 4 步中，驗證器“開始時間”沒有被觸發。

題

我的問題歸結為：當“結束時間”輸入發生更改（反之亦然）時，如何重新驗證“開始時間”，目的是在用戶更改錯誤消息時響應式更新錯誤消息輸入？ 換句話說，當任一 Form.Items 的輸入發生更改時，我如何驗證這兩個Form.Items？

如果我花了太長時間才觸及問題的核心，我深表歉意。 我認為上下文太多總比太少好。 先感謝您。

Answer 1

您應該設置字段“結束時間”的依賴項屬性
文檔： https : //ant.design/components/form/#dependencies