如何將道具傳遞給模態

Question

我有一個購物應用程序，可以在其中映射一些產品並將其呈現在屏幕上。 用戶可以增加/減少數量。 當數量達到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>
))}

有任何想法嗎？

Answer 1

我最近也遇到過類似的情況。 我使用redux / global狀態來管理它，因為我必須跟蹤許多模態。 與當地州類似的方法

//****************************************************************************/

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