React-如何通过索引更改className?

问题描述

我创建了一个简单的逻辑:当您单击某个特定的块时， classname 会更改，但是问题是，当您单击某个特定的块时， classname 变化，其余的块看起来像这样

I created a simple logic: when you click on a certain block, the classname changes, but the problem is that when you click on a certain block, the classname changes and the rest of the blocks looks like this

我只需要更改单击的类的名称，我想我需要使用索引，但是我不太了解如何重新定义它

I need to change only the name of the class that I clicked, I think I need to use the index, but I don't quite understand how to reolize it

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>
    );
};

推荐答案

您可以记住所选索引

请参考以下代码:

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>
    );
};

这篇关于React-如何通过索引更改className?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！