classList.add仅在ReactJs中首次工作

问题描述

每当输入聚焦时，我都试图将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只在第一次使用？

我在这里想念东西吗？

解决方法

如果您的浏览器堆栈允许，则可以使用:focus-within伪类来实现相同的行为。

您只需要li:focus-within { outline: 2px solid blue }

而不是一堂课