如何更改从地图列表中返回的特定项目的颜色

Question

当我单击一个项目而不是所有列表项目时，我想更改边框或轮廓颜色但当我点击任何项目时，所有列表都更改了

我正在尝试更改一个项目的颜色，而不是全部。。。所以当我改变状态时，它改变了所有的，而不是项目，我点击了

const [color,setColor]=useState('');

type Values = {
id: number;
title: string;
image: string;
color:string;
};

const myList2:Array<Values> =[
{
id: 1,
title: 'Suitcase',
image: suitcase,
color:'blue',
},
{
id: 2,
title: 'Briefcase',
image: briefcase,
color:'aqua',
},{
id: 3,
title: 'Handbage',
image: handbage,
color:'red',
},
{
id: 4,
title: 'Multy',
image: multy,
color:'green',
},
{
id: 5,
title: 'Backpack',
image: backpack,
color:'gray',
},
{
id: 6,
title: 'Family',
image: family,
color:'orange',
},
]

const listImage=myList2.map((item,i) => {
return <span key={i}>
<img  key={item.id}  style={{borderColor:color}}     onClick={()=>setColor(item.color)} src={item.image} alt={item.title}   />
</span>
})

Answer 1

当前您只在状态变量中设置颜色名称，但没有指定此颜色将应用的索引

因此，只需在图像标签中添加onClick={((=>setActive(i(}，即可仅存储用户单击的状态变量的索引

最后通过在图像标签中添加style={｛borderColor:active==i？item.color:'transparent'，borderWidth:3}｝来检查样式中的条件

const [active,setActive]=useState(-1);
type Values = {
id: number;
title: string;
image: string;
color:string;
};

const myList2:Array<Values> =[
{
id: 1,
title: 'Suitcase',
image: suitcase,
color:'blue',
},
{
id: 2,
title: 'Briefcase',
image: briefcase,
color:'aqua',
},{
id: 3,
title: 'Handbage',
image: handbage,
color:'red',
},
{
id: 4,
title: 'Multy',
image: multy,
color:'green',
},
{
id: 5,
title: 'Backpack',
image: backpack,
color:'gray',
},
{
id: 6,
title: 'Family',
image: family,
color:'orange',
},
]

const listImage=myList2.map((item,i) => {
return <span key={i}>
<img  key={item.id}  style={{borderColor: active == i ? item.color : 'transparent', borderWidth: 3}}     onClick={()=>setActive(i)} src={item.image} alt={item.title}   />
</span>
})

Answer 2

您可以使用id。因此，不只是颜色name，而是在状态变量=>中保留两条信息作为对象；id, color。

像这样：

const [selectedList, setSelectedList] = useState({});

const listImage=myList2.map((item,i) => {
return <span key={i}>
<img key={item.id} 
style={item.id === selectedList.id ? { borderColor: selectedList.color } : {}}     
onClick={() => setSelectedList({id: item.id, color: item.color})} 
src={item.image} alt={item.title}   />
</span>
})