时间戳

首页 > 解决方案 > 如何在 React js 中设置地图项的样式

javascript - 如何在 React js 中设置地图项的样式

问题描述

我是新手reactjs。我有一个array将是

const mediumNames = ["TAMIL Medium", "ENGLISH MEDIUM"]

我使用此代码生成了两张卡：

const [selectedMediumColor, setSelectedMediumColor] = useState('')

<div>
    {mediumNames.map((text, index,) => (

    <Card style={{ border: selectedMediumColor }} onClick={() => onClickMedium(text,index)} >
        <div >
            <img className={classes.imginCardBoard} src={TNlogo}></img>
                <Typography className={classes.textinCardBoard} > { text} </Typography>
        </div>
    </Card>
    ))}
</div>

我想在 ReactJS 中单击卡片时设置边框颜色。如果用户选择第一张卡片，边框颜色应为蓝色，下一张卡片边框颜色应为白色，反之亦然。

这是我写的函数代码：

 const onClickMedium = (medium,indexno) => {
        console.log(medium)
        console.log(indexno)

        if (medium === "TAMIL Medium") {
            
            selectedMediumColor('2px solid #00adb5')
        }
        else {
            selectedMediumColor('')

        }
    }

它正在为两张卡设置颜色。这是图像： 在此处输入图像描述

我希望只为一张卡设置颜色。我怎样才能做到这一点？请帮我解决一些问题。

标签： javascripthtmlcssreactjs

解决方案

您可以尝试这种方法，您可以在其中设置选定的索引：

const [selectedIndex, setSelectedIndex] = useState('')

 <div>
    {mediumNames.map((text, index,) => (

    <Card style={{ border: index === selectedIndex ? '2px solid #00adb5' : 'none'}} onClick={() => setSelectedIndex(index)} >
        <div >
            <img className={classes.imginCardBoard} src={TNlogo}></img>
                <Typography className={classes.textinCardBoard} > { text} </Typography>
        </div>
    </Card>
    ))}
</div>

推荐阅读