Question

因此，基本上，当我单击addToBasket按钮时，document.getElementById()仅适用于第一个产品。即使单击其他产品，它也始终会更改第一个产品。

如何防止这种情况发生？

我要在要单击的产品上显示“删除”按钮。

function Product(/* ... */) {
    const addToBasket = () => { 
        // DISPATCH ITEM INTO THE DATA LAYER
        dispatch({ 
            type: "ADD_TO_BASKET", 
            item: { 
                id: id, 
                title: title, 
                image: image, 
                price: price, 
                rating: rating, 
            } 
        }) 
    }  
 
    const addToBasketFull = () => {
        if(user){
            addToBasket()
            document.getElementById('addButton').style.display="none"
            document.getElementById('removeButton').style.display ='block'
        } else {
            alert('You need to be Signed-In in order to add products to the Basket.')
        };
    }

    return (
        <div className="product">
            <div className="product__info">
                <p className="product__title">{title}</p>
                <p className="product__price">
                    <strong>${price}</strong>
                </p>
                <div className="product__rating">
                    {Array(rating)
                    .fill()
                    .map(() => (
                        <StarIcon />
                    ))}
                </div>
            </div>

            <img src={image}/>
            <button id="addButton" className="product__buttonAdd" onClick={addToBasketFull}>Add to Basket</button>
            <button id="removeButton" className="product__buttonRemove" onClick={''}>Remove from Basket</button>
        </div>
    )
}

export default Product

Answer 1

document.getElementById仅在声明了多个ID的情况下才选择第一个匹配元素。

请注意，id属性的每个元素都应具有唯一的值。如果您有多个具有addButton和removeButton id的元素，那么只有第一个可以工作

演示：

console.log(document.getElementById('same').innerText);
console.log(document.getElementById('unique').innerText);

<div id="same">First Text</div>
<div id="same"> second Text</div>

<div id="unique">Some Text</div>

我建议将代表产品对象/ id的值传递给add / removeButton，然后根据该值进行处理：

<button id="addButton" 
        className="product__buttonAdd" 
        onClick={ () => this.addToBasketFull(productId) }>
            Add to Basket
</button>

Answer 2

使用React状态，而不是DOM操作：

function Product(/* ... */) {
    const [isInBasket, setInBasket] = useState(false);

    // ...
 
    const addToBasketFull = () => {
        if(user){
            addToBasket()
            setInBasket(true);
        } else {
            alert('You need to be Signed-In in order to add products to the Basket.')
        };
    }

    return (
      { /* ... */ }
            <button
              style={{ display: isInBasket ? 'none' : 'block' }} 
              className="product__buttonAdd"
              onClick={addToBasketFull}
            >
              Add to Basket
            </button>
            <button
              style={{ display: isInBasket ? 'block' : 'none' }}
              className="product__buttonRemove"
            >
              Remove from Basket
            </button>
      { /* ... */ }
    )
}

这很重要，因为使用React管理DOM元素的创建，如果React生成新的DOM元素，您对DOM所做的任何手动更改都可能随时被撤消。

document.getElementById仅适用于一种产品

2 个答案: