javascript - 如何在 React 中从购物车状态中删除未选中的项目
问题描述
我有显示带有复选框的项目,一旦单击/选中,它们就会被添加到购物车中。取消选中时,它们会再次添加到购物车中。我不确定如何在未选中时切换选中以删除该项目。
export class DestinationPrices extends React.Component {
constructor(props) {
super(props);
this.state = {
flightData: [],
isChecked: props.isChecked || false,
data: "",
cart: []
};
this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
}
// ...
}
Select(FD) {
return (
<div>
{FD.FlightID}
<label>
<Checkbox
id={FD.FlightID}
name={FD.FlightID}
value={this.state.isChecked}
onChange={() => this.handleCheckboxChange(FD)}
/>
<span>Select</span>
</label>
</div>
);
}
handleCheckboxChange = id => {
const cartItem = this.state.cart.filter(x => x.FlightID === id.FlightID);
this.setState({
isChecked: !this.state.isChecked,
cart: [...this.state.cart, id]
});
}
选中该项目后,它会在购物车中显示一些详细信息。每次单击复选框时,项目都会添加到状态并显示在卡片中,无论它是选中还是未选中。如果未选中该项目,我需要从状态中删除该项目。
我是否检查该项目是否已经存在并从购物车中删除?
render() {
var data = this.props.cart;
var arry = [];
arry.push(data);
return (
<div>
<Card body>
<CardTitle>
<h3>
<b>Flights Selected : </b>
</h3>
</CardTitle>
<CardText>
<span className="fa fa-cart-plus fa-2x"> {data.length} </span>{" "}
{this.getData()}
</CardText>
<div />
</Card>
</div>
);
}
任何帮助将不胜感激,谢谢!
解决方案
一种解决方法是按照您在问题中概述的方式进行操作:检查商品是否已经在购物车中。如果是,您可以将其从购物车中删除。不是,您可以将其添加到购物车中。
handleCheckboxChange = item => {
this.setState(prevState => {
const isItemInCart = prevState.cart.some(el => el.FlightID === item.FlightID);
const cart = isItemInCart
? prevState.cart.filter(el => el.FlightID !== item.FlightID)
: [...prevState.cart, item];
return { cart };
});
}
推荐阅读
- css - 在 reactstrap 标签中设置 material-ui 图标
- r - 在输入旁边设置小部件标签并最小化其上方和下方的距离
- r - 选择删除并在同一个选择调用中保留一些变量
- unit-testing - 来自命名导出的 Jest 模拟工厂函数
- macos - google-cloud-sdk install ERROR: (gcloud.components.update) 提供的路径必须存在
- bash - 使用 env-cmd 将 bash 环境变量传递到新的 shell
- reactjs - 从 woocommerce 中的 API 向特定国家/地区销售
- apache-kafka - 如何使用 SMT 为不同主题转换重命名字段
- spring-boot - 在redis中对哈希键进行通配符搜索
- r - 在特定行拆分数据框并将列排列到 R 中的“部分”中