首页 > 解决方案 > React - 如何按索引更改类名?

问题描述

我创建了一个简单的逻辑:当你点击某个块时,会classname发生变化,但问题是当你点击某个块时,classname变化和其余块看起来像这样

在此处输入图像描述

我只需要更改我单击的类的名称,我想我需要使用索引,但我不太明白如何重新处理它

export default function SelectGradientTheme(props) {
    const resultsRender = [];
    const [borderColor, setBorderColor] = useState(false);

    const setBorder = () => {
        setBorderColor(!borderColor)
    }

    const borderColorClassName = borderColor ? "selectBorder" : null;

    for (var i = 0; i < GradientThemes.length; i += 3) {
        resultsRender.push(
            <div className={"SelectThemePictures_Separator"}>
                {
                    GradientThemes.slice(i, i + 3).map((col, index) => {
                        return (
                            <div key={index} className={borderColorClassName} onClick={() => props.SideBarPageContent(col)|| setBorder()}>
                            </div>
                        );
                    })
                }
            </div>
        )
    }


    return (
        <div className="SelectThemeWrapper">
            {resultsRender}
        </div>
    );
};

标签: javascriptarraysreactjsreact-props

解决方案


您可以记住所选索引

请参考以下代码:

export default function SelectGradientTheme(props) {
    const resultsRender = [];
    const [selectedIndex, setSelectedIndex] = useState(false);

    const setBorder = (index) => {
        setSelectedIndex(index);
    };

    for (var i = 0; i < GradientThemes.length; i += 3) {
        resultsRender.push(
            <div className={"SelectThemePictures_Separator"}>
                {
                    GradientThemes.slice(i, i + 3).map((col, index) => {
                        return (
                            <div key={index}
                                className={index === selectedIndex ? 'selectBorder' : null}
                                onClick={() => props.SideBarPageContent(col)|| setBorder(index)}>
                            </div>
                        );
                    })
                }
            </div>
        )
    }


    return (
        <div className="SelectThemeWrapper">
            {resultsRender}
        </div>
    );
};

推荐阅读