我想在按下心脏图标时更新数组对象中关键心脏的状态它变为红色,因此为此我使用 react native 图标,并且我使用 heart 和 hearto 在单击它时进行切换
这是代码:
state = {
localAdversiment: [
{
title: "Ecloninear 871",
image: require("../../assets/images/truck_image.png"),
year: "2015",
type: "Truck",
status: "new",
price: "$ 2000",
heart: "hearto"
}
这里是当按下心形图标时调用的函数
handleFavourite = index => {
const { heart } = this.state.localAdversiment[index];
this.setState(
{
heart: "heart"
}
);
};
这是心脏图标代码
<TouchableOpacity onPress={() => this.handleFavourite(index)}>
<Icon
name={item.heart}
type={"AntDesign"}
style={{ fontSize: 18 }}
/>
</TouchableOpacity>
请帮助我如何在单击时将心脏更新为心脏而不是心脏
最佳答案
您可以通过以下方法轻松完成
state = {
localAdversiment: [
{
id: 0,
title: "Ecloninear 871",
image: require("../../assets/images/truck_image.png"),
year: "2015",
type: "Truck",
status: "new",
price: "$ 2000",
heart: "hearto",
selected: false
}
}
现在在 onPress 做这个
handleFavourite = (item) => {
const { id } = item;
this.setState({
localAdvertisement: this.state.localAdvertisement.map((item) => {
if(item.id === id){
return {
...item,
selected: !item.selected
}
}
return item
})
})
};
现在像这样渲染
<TouchableOpacity onPress={() => this.handleFavourite(item)}>
<Icon
name={item.selected ? "heart" : 'hearto'}
type={"AntDesign"}
style={{ fontSize: 18 }}
/>
</TouchableOpacity>
希望它会帮助你
关于javascript - 如何在数组中的对象项上设置状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58286864/