时间戳

首页 > 解决方案 > 如何将购物车按钮“添加”更改为其他名称

javascript - 如何将购物车按钮“添加”更改为其他名称

问题描述

单击添加按钮并使其禁用后，我想将“添加”按钮设置为“添加”。

{
      products.map((val, i)=>(
        <div className="product_item">
           {
            val.productType === 'chicken'?
              <>
              <img src={img2}></img>
              <p className="product_data">Chicken Name: {val.chickeName}</p>
              <p align="left" className="product_data">weight: 500gm</p>
              <p align="left"className="product_data">₹{val.price}/- <button onClick={addTocartProduct}>ADD</button></p>
              </>: null
           }
        </div>
     ))
   }

我在反应 js 中有添加到购物车按钮的示例项目。但是我想在单击添加按钮并将其禁用后将“添加”按钮设置为“添加”。

在此处输入图像描述

如果有人知道，请放弃您的答案。

标签： javascriptreactjs

解决方案

考虑到你有一个数组，products你应该初始化一个 bool 数组：

const [buttonsClicked, setButtonsClicked] = useState(new Array(products).fill(false));

然后

{
      products.map((val, i)=>(
        <div className="product_item">
           {
            val.productType === 'chicken'?
              <>
              <img src={img2}></img>
              <p className="product_data">Chicken Name: {val.chickeName}</p>
              <p align="left" className="product_data">weight: 500gm</p>
              <p align="left"className="product_data">₹{val.price}/- <button onClick={(e) => addTocartProduct(val, i)}>{buttonsClicked[i] ? 'ADDED' : 'ADD'}</button></p>
              </>: null
           }
        </div>
     ))
   }

最后是addTocartProduct函数：

const addTocartProduct = (val , i) => {
   let result = [...buttonsClicked];
   result[i] = !result[i];
   setButtonsClicked(result);
}

推荐阅读