classList.add 僅在 ReactJs 中第一次工作

Question

每當輸入被聚焦時，我都試圖將 className 添加到輸入的父元素 (li) 中。

<div className="SubCategory__palette">
                <ul aria-label="Filter options">
                    {SubcategoryArraySort.map((filtersub) => (
                    
                        <li
                            key={filtersub.subCategoryId}
                            onClick={() => {
                                props.handleSubCategoryClick(filtersub.subCategoryId, datarry);
                            }}
                            id={`${filtersub.name}--li-container`}
                        >
                            <label htmlFor={filtersub.name} >
                                    {filtersub.name}
                            </label>
                            <input
                                id={filtersub.name}
                                className="SubCategory__input-style"
                                type="radio"
                                name="sub-category-pills"
                                onFocus={() => {
                                    onInputFocus(filtersub.name);
                                }}
                                onBlur={() => {
                                    onInputBlur(filtersub.name);
                                }}
                            />
                        </li> 
                        
                    ))}
                </ul> 
                </div>

功能是：

    function onInputFocus(id: string) {
            const containerId = `${id}--li-container`;
            $('#' + `${containerId}`).addClass('subCategoryFocussed');
    }

    function onInputBlur(id: string) {
        const containerId = `${id}--li-container`;
        $('#' + `${containerId}`).removeClass('subCategoryFocussed');
    }

.subCategoryFocussed {
   outline: 2px solid blue;
}

問題：當我通過tab鍵導航時，第一個單選按鈕被聚焦並且 className 被添加到它的父元素。 現在，在按下arrow-keys導航到其他單選按鈕后，即使它們處於聚焦狀態，也不會向它們添加 className。

為什么 classList.add 只在第一次工作？

我在這里錯過了什么嗎？

Answer 1

如果您的瀏覽器堆棧允許，您可以使用:focus-within偽類實現相同的行為。

你需要的不是一個類，而是li:focus-within { outline: 2px solid blue }