防止表單提交與標簽輸入組件發生反應

Question

我知道這個問題的許多變體已經被問過，但我的問題並不像使用event.preventDefault()那樣簡單，或者它可能是並且我的事件以某種方式變得糾纏不清。

問題：我有一個標簽助手組件，當通過按“Enter”輸入新標簽時，它會添加一個帶有新標簽信息的隱藏輸入字段。 發生這種情況時，我的表單會提交，這是默認行為。 我不要那個。 此事件發生在子組件級別，而不是表單標記所在的父級別。 當我在父級別添加event.preventDefault()時，這確實阻止了表單提交，但是這會鎖定我的表單並且無法提交具有默認行為的表單。 當我在子級別嘗試此操作時，它會忽略event.preventDefault() 。 如果我嘗試在表單上使用內聯onSubmit並將useState作為條件並更新此 state onClick提交按鈕，則更新的值會滯后。 我嘗試使用useEffect但我得到了一個無限循環。 我只是想防止在保持正常行為的同時提交空的必填字段。 （我使用的是不需要redux 、sagas、axios 等內容的混音）

代碼沙箱示例： https://codesandbox.io/s/vibrant-lederberg-3pkriq-3pkriq

我的子組件中的一些代碼

onEnter 創建帶有標簽信息的隱藏輸入字段：

    const onEnter = (e) => {
        if (e.code === 'Enter' && inputValue && valid) {
            e.preventDefault();
            setTags([...tags, { id: String(Math.floor(Math.random() * 1000)), name: inputValue }]);
            setInputValue('');
        }
    };

帶有隱藏輸入的葯丸：

    const Pill = ({
        onClickHandler, name, value, children,
    }) => {

        return (
            <div title="remove" onClick={(e) => onClickHandler(e)}>
                {children}<span>X</span>
                <input type="hidden" name={name} value={value.name} />
            </div>
            
        );
    };

渲染子組件：

    return (
        <div>
            <input
                placeholder={placeholder}
                value={inputValue}
                onKeyUp={(e) => onEnter(e)}
                onChange={(e) => onChange(e)}
            />
            <div>
                {tags
                    && tags.map((item) => (
                        <Pill
                            value={item}
                            onClickHandler={onDelete}
                            key={item.name}
                            name={name}
                        >
                            {item.name}
                        </Pill>
                    ))}
            </div>
        </div>
    );

在嘗試了數十種解決方法（例如 HTML5 所需屬性、驗證庫、自定義服務器端驗證、 event.stopPropagation 、內聯 onSubmit 和相同的問題仍然存在之后，我已經堅持了幾周。 在這一點上，我認為問題可能出在事件的觸發位置。 當我在按Enter后在父級別記錄event.type時，我看到undefined ，然后如果有幫助則KeyUp 。 也許我需要從孩子那里傳遞事件？ 任何方向或線索都會有所幫助！

Answer 1

解決方案：只需將我的事件偵聽器從onKeyUp更改為onKeyDown即可解決我的問題。 按下按鍵時，該錯誤是按事件順序排列的。 它們按keydown 、 keyup 、 keypress的順序觸發。 keyup觸發一次，而keydown和keypress觸發多次。 在這兩者之間的某個地方，我的事件沒有被正確捕獲。

說明： https://thisthat.dev/keydown-vs-keypress-vs-keyup/

固定 Codesandbox：https://codesandbox.io/s/vibrant-lederberg-3pkriq-forked-79og2h