Reactjs 如何通过单击将类添加到图像？

如果标记完成，如何向图像添加类：true？由于我没有尝试过，该类被添加到所有图像中，而不是那些具有真实

import React，{useState}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[avatarar，setavatarar]=使用状态({
化身：[
{
id:1，
url:“https://starwars-visualguide.com/assets/img/characters/1.jpg"
},
{
id:2，
url:“https://starwars-visualguide.com/assets/img/characters/2.jpg"
},
{
id:3，
url:“https://starwars-visualguide.com/assets/img/characters/3.jpg"
}
]
});
const[classUser，setClassUser]=useState（null）；
const[selectUser，setSelectUser]=useState（false）；
const onAddClass=id=>{
if（avatarar.avatar.find（items=>items.id==id））{
const index=avatarr.avatar.findIndex（items=>items.id==id）；
塞特拉尔([
…虚拟现实切片（0，索引），
…虚拟化身切片（索引+1）
]);
}否则{
setavatarar（[…avatarar，{done:true}]）；
setSelectUser（avatarar.avatar.map（items=>items.done））；
如果（选择用户）{
setClassUser（“活动用户”）；
}
}
};
常量块创建=（）=>{
返回avatar.avatar.map（项目=>{
返回(
onAddClass（items.done，items.id）}
className={selectUser？classUser:null}
/>
);
});
};
返回(
{blockCreate（）}
);
}

---

你看起来像这样吗

export default function App() {
const [avatarArr, setAvatarArr] = useState({
    avatar: [
      {
    id: 1,
    url: "https://starwars-visualguide.com/assets/img/characters/1.jpg"
  },
  {
    id: 2,
    url: "https://starwars-visualguide.com/assets/img/characters/2.jpg"
  },
  {
    id: 3,
    url: "https://starwars-visualguide.com/assets/img/characters/3.jpg"
  }
    ]
  });
  const [selectUser, setSelectUser] = useState(false);

  const onAddClass = item => {
    setSelectUser(item);
  };
  const blockCreate = () => {
    return avatarArr.avatar.map(items => {
      return (
        <div key={items.id}>
          <img
            src={items.url}
            alt="avatar"
            width="150px"
            onClick={() => onAddClass(items)}
            className={selectUser.id === items.id ? "myClass" : ""}
          />
        </div>
      );
    });
  };

  return (
    <div className="App">
      <div>{blockCreate()}</div>
    </div>
  );
}

导出默认函数App（）{
const[avatarar，setavatarar]=使用状态({
化身：[
{
id:1，
url:“https://starwars-visualguide.com/assets/img/characters/1.jpg"
},
{
id:2，
url:“https://starwars-visualguide.com/assets/img/characters/2.jpg"
},
{
id:3，
url:“https://starwars-visualguide.com/assets/img/characters/3.jpg"
}
]
});
const[selectUser，setSelectUser]=useState（false）；
const onAddClass=项=>{
设置用户（项目）；
};
常量块创建=（）=>{
返回avatar.avatar.map（项目=>{
返回(
onAddClass（项目）}
className={selectUser.id==items.id？“myClass”：“}
/>
);
});
};
返回(
{blockCreate（）}
);
}

---

现场工作演示

是的，这是您所需要的，只是如何进行，以便您可以选择两个或更多？那么select是否保存在上一个上？@luckydev将所选项目（对象）保存到一个状态，并有条件地与列表匹配。