Next.js+JQuery：点击div内按钮获取首个p标签值（$(this)失效）

问题原因 #

1. 箭头函数导致this指向错误：你在onClick里使用了箭头函数，这里的this指向的是组件实例而非按钮DOM元素，所以$(this)根本找不到按钮，自然无法定位到对应的<p>标签。
2. jQuery逻辑错误：就算this能指向按钮，closest("p")是找按钮最近的<p>父元素，但你要的是同一cartcontainer下的第一个<p>，这个写法逻辑本身就不对。

解决方案 #

方案1：直接利用现有数据（推荐，无需操作DOM）

既然已经拿到了item.id，完全不用去DOM里提取内容，直接通过数据定位索引即可：

<div className="cartcontainer">
  <p
    key={item.id}
    style={{
      display: "inline-block",
      marginTop: "auto",
      marginBottom: "auto",
      float: "left",
    }}
  >
    NFT ID: {item.id}
  </p>
  <p
    key={`${item.id}-price`} {/* 注意key要唯一，避免和上方重复 */}
    style={{
      display: "inline-block",
      marginTop: "auto",
      marginBottom: "auto",
      float: "left",
    }}
  >
    Price: {item.price}
  </p>
  <button
    style={{
      float: "right",
      width: 40,
      height: 40,
      fontSize: 20,
      borderRadius: 12,
      display: "block",
    }}
    onClick={() => {
      const index = cart.findIndex(cartItem => cartItem.id === item.id);
      removeCartItemHandler(index);
    }}
  >
    X
  </button>
</div>

方案2：通过事件对象操作DOM（若必须从DOM获取内容）

如果一定要从DOM里提取第一个<p>的内容，可以借助事件对象e定位父容器，再查找目标元素：

<div className="cartcontainer">
  <p
    key={item.id}
    style={{
      display: "inline-block",
      marginTop: "auto",
      marginBottom: "auto",
      float: "left",
    }}
  >
    NFT ID: {item.id}
  </p>
  <p
    key={`${item.id}-price`}
    style={{
      display: "inline-block",
      marginTop: "auto",
      marginBottom: "auto",
      float: "left",
    }}
  >
    Price: {item.price}
  </p>
  <button
    style={{
      float: "right",
      width: 40,
      height: 40,
      fontSize: 20,
      borderRadius: 12,
      display: "block",
    }}
    onClick={(e) => {
      // 找到父容器
      const container = e.currentTarget.closest('.cartcontainer');
      // 获取第一个p标签
      const firstP = container.querySelector('p:first-of-type');
      // 提取NFT ID内容
      const nftId = firstP.textContent.trim().replace('NFT ID: ', '');
      // 查找对应索引
      const index = cart.findIndex(cartItem => cartItem.id === nftId);
      removeCartItemHandler(index);
    }}
  >
    X
  </button>
</div>

额外提示 #

• React开发优先通过状态和数据处理逻辑，尽量避免直接操作DOM，这样代码更易维护。
• 确保React元素的key唯一性，两个<p>标签不能共用同一个item.id，否则会引发渲染错误。

内容的提问来源于stack exchange，提问作者Ted's Projects