选择城市时如何更改动态数组列表的背景
选择城市时如何更改动态数组列表的背景
提问于 2021-09-24 14:17:59
<div className="images-container">
{cities?.map((city) => (
<>
{city?.isActive && (
<>
{city?.images.map((image) => (
<div className="img-block">
<img className="cardd-img" src={image.image} alt="DGNet" />
<p className="paragrafo">{image?.paragraph}</p>
</div>
))}
</>
)}
</>
))}
</div>
我有一个城市列表，当我选择一个城市时，我需要改变背景，这是我所拥有的。
const [cities, setCities] = useState([
{
name: "Divinópolis",
isActive: false,
images: [
{
image: imgLogoTIVerde,
paragraph: "Special Sales e Technical Support",
}
],
},
{
name: "Nova Olímpia",
isActive: false,
images: [
{
image: imgLogoLivitech,
paragraph: "Special Sales e Technical Support",
}
],
},
const states = [
{
name: 'minas gerais',
cities: ['Divinópolis', '']
},
{
name: 'paraná',
cities: ['Nova Olímpia', '']
}
]
function handleChangeCity(name) {
const cityChanged = cities.map((city) => {
city.isActive = false;
if (city.name === name) city.isActive = true;
if (city.name === name) city.arrowActive = true;
return city;
});
setCities(cityChanged);
} <div className="scroll">
{states?.map(state => (
<div key={state.name} className="cidade">
<header className="header">
<h1 className="font-bold">{state.name}</h1>
</header>
{state.cities.map(city => (
<>
<div className="city-block">
<label className="label" for="content">
{city}
</label>
<input type="radio" name="radio" className="single" onClick={() => handleChangeCity(city)} />
</div>
</>
))}
</div>
))}
</div>
当我选择一个城市时，img显示在一个容器上，这很好，真正需要的是那个城市div的背景也改变了，但只改变了被选中的那个。
我添加了代码部分，当选择城市时，它显示图像，每个城市可能有不同的图像或与其他城市相同
回答 2
Stack Overflow用户
发布于 2021-09-24 14:24:37
你想把背景颜色添加到哪个div中并不是100%清楚，但这个逻辑应该对你有效。
{state.cities.map(city => (
<>
<div className="city-block" style={{ backgroundColor: city.isActive ? 'blue' : 'none' }}>
<label className="label" for="content">
{city}
</label>
<input type="radio" name="radio" className="single" onClick={() => handleChangeCity(city)} />
</div>
</>
))}Stack Overflow用户
发布于 2021-09-24 14:29:01
无论是否为isActive，您都可以传递不同的className，或者使用样式属性。示例：
<div className={city.isActive ? 'class-with-backgroud-1' : 'class-with-backgroud-2'}>
...
</div>或者：
<div style={{ backgroundColor: city.isActive ? 'color-1' : 'color-2' }}>
...
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69316531
复制相关文章
相似问题
腾讯云开发者
