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

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

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

How to change color of specific items returen from map list

reactjs

map-function