Javascript document.getElementById仅适用于一种产品

因此，基本上，当我单击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

document.getElementById仅在声明了多个ID时选择第一个匹配元素

注意，id属性应该为每个元素携带唯一的值。如果有多个元素具有addButton和removeButton ID，则只有第一个元素有效

演示：

console.logdocument.getElementById'same'。innerText； console.logdocument.getElementById'unique'。innerText； 第一个文本 第二文本 如果声明了多个ID，则某些Textdocument.getElementById将仅选择第一个匹配的元素

注意，id属性应该为每个元素携带唯一的值。如果有多个元素具有addButton和removeButton ID，则只有第一个元素有效

演示：

console.logdocument.getElementById'same'。innerText； console.logdocument.getElementById'unique'。innerText； 第一个文本 第二文本

---

某些文本使用反应状态，而不是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所做的任何手动更改都可能随时撤消。

使用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所做的任何手动更改都可能随时撤消。

在React中，除非严格必要，否则不应使用DOM方法。您可以用React state表示您需要的内容。还请记住，ID在文档中必须是唯一的。所以，基本上你的组件在整个应用程序中只能使用一次。你可能将相同的ID设置为多个元素，这在HTML中是无效的。函数名也很清楚：getElementById，而不是getElementsById。在React中，除非严格必要，否则不应使用DOM方法。您可以用React state表示您需要的内容。还请记住，ID在文档中必须是唯一的。所以，基本上你的组件在整个应用程序中只能使用一次。你可能将相同的ID设置为多个元素，这在HTML中是无效的。函数名在这一点上也很清楚：getElementById，而不是getElementsById。它说的是×TypeError：无法读取null的属性'style'，我如何修复它听起来像你还在做一些getElementById，那么。很遗憾，我没有看到它，修复了它，非常感谢你的帮助！上面写着×TypeError:无法读取null的属性'style'，我如何修复它听起来你还在做一些getElementById，那么。我的错，我没有看到它，修复了它，非常感谢你的帮助！