我有一个购物应用程序,我可以在其中映射一些产品并将它们呈现在屏幕上。用户可以增加/减少数量。当数量达到 1 并且用户点击减少时,一些中间件会介入并询问他们是否确定要将其从购物篮中删除。如果他们单击“否”,则会关闭模式并将其留在购物篮中。如果他们单击“是”,它将关闭模式并将其从购物篮中删除
如何将道具传递给模式以确保删除正确的产品?
到目前为止我有这个。所有功能都在那里,并且可以删除。我只是不确定如何将特定产品传递给模式?增量/减量工作的原因是因为它们是map
映射到每个产品。显然,当模式加载时,它不是地图的一部分。我尝试过将其包含在地图中,但显然这会为每个产品呈现一个没有用的模式
<h4> Bag </h4>
<Modal />
{bag.products.map((product, index) => (
<div key={index}>
<div>{product.name}</div>
<div>£{product.price}</div>
<div>
<span> Quantity:{product.quantity} </span>
<button onClick={() => this.props.incrementQuantity(product, product.quantity += 1)}> + </button>
<button onClick={() => this.props.decrementQuantity(product)}> - </button>
</div>
</div>
))}
有任何想法吗?
我最近遇到了类似的情况。我使用 redux/global state 来管理它,因为我必须跟踪许多模式。与当地国家类似的方法
//****************************************************************************/
constructor(props) {
super(props)
this.state = {
isModalOpen: false,
modalProduct: undefined,
}
}
//****************************************************************************/
render() {
return (
<h4> Bag </h4>
{this.state.isModalOpen & (
<Modal
modalProduct={this.state.modalProduct}
closeModal={() => this.setState({ isModalOpen: false, modalProduct: undefined})
deleteProduct={ ... }
/>
)
{bag.products.map((product, index) => (
<div key={index}>
<div>{product.name}</div>
<div>£{product.price}</div>
<div>
<span> Quantity:{product.quantity} </span>
<button onClick={() => this.props.incrementQuantity(product, product.quantity += 1)}> + </button>
<button onClick={() => this.decrementQuantity(product)}> - </button> // <----
</div>
</div>
))}
)
}
//****************************************************************************/
decrementQuantity(product) {
if(product.quantity === 1) {
this.setState({ isModalOpen: true, modalProduct: product })
} else {
this.props.decrementQuantity(product)
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)