如何在模态菜单中显示卡片数据 react.js 2022 - 2023

Question

我用“json”文件中的数据映射了卡片，并希望卡片上的相同详细信息显示在模态菜单上

在代码片段中是显示的卡片的代码，模态正常工作（打开和关闭），但我现在想在模态中使用来自卡片的数据，但它没有显示。 我使用卡片密钥来指定要使用哪些卡片数据，但我认为它不是这样工作的。 我是新手，认为我需要使用道具，但找不到任何可以以我理解的方式解释它的材料。 如果可以，请提供帮助，我们很乐意接受任何批评，任何其他改进我的代码的方法也会有所帮助。 任何学习材料也将非常有帮助。

代码：

      {
        details.map((details) => {
          return (
            <div className="card" key={details.id}>
              <img src={details.image} alt="" />
               <h5 className="board-name">{details.design}</h5>
               <p className="board-size">Size: {details.size}</p>
               <h6 className="board-price">{details.price}</h6>

              <button className="add-to-cart" onClick={() => 
                 setModalDisplay(true)}> click me
              </button>

            </div>
          )
        })
      }

      {modalDisplay && 
            <div className="backdrop">

            <div className="cart-card" key={details.id}>
              <div className="item-details">
                <img src={details.image} alt="" width="98px" height="98px" />
                <h4 className="item-name">{details.design}</h4>
                <p className="item-size">{details.size}</p>
                <h6 className="item-price">{details.price}</h6>
                <button className="exit-modal" onClick={() => 
                  setModalDisplay(false)}>
                </button>
              </div>
              <span className="modal-inputs">
                <button className="minus-btn">-</button>
                <input type="text" className="amount-input" value="01" />
                <button className="plus-btn">+</button>
                <button className="add-btn">Add to cart</button>
              </span>
            </div>
      
          </div>
      }
    </div>

Answer 1

您可以将卡数据存储在 onClick 中，例如将其设置为 state 并在模态中使用 state 作为道具或直接使用。 我认为这将是在这种情况下使用的最佳选择。