React中点击按钮时如何传递ScannedCrop的_id并打印？

步骤1：修改点击函数，接收并打印ID #

把你的getId函数改成可接收id参数的形式，直接在函数内打印目标ID：

const getId = (id) => {
  console.log('当前作物的ID:', id);
}

步骤2：给按钮绑定带参数的点击事件 #

在循环渲染的按钮上添加onClick事件，通过箭头函数传递当前ScannedCrop的_id（注意不能直接写getId(ScannedCrop._id)，否则组件渲染时会立即执行函数）：

<button className={styles.viewMoreBtn} onClick={() => getId(ScannedCrop._id)}>
  More Info
</button>

额外优化：给循环项添加key属性 #

React循环渲染列表时，建议给每个项添加唯一的key属性，这里用ScannedCrop._id作为key最合适，能提升渲染性能。

修改后的完整循环代码：

<div className={styles.scannedCropsGrid}> 
  {
    scannedCrops.map(ScannedCrop => {
      return (
        <div key={ScannedCrop._id}>
          <div className={styles.center}>
            <div className={styles.scannedCropsContent}>
              <img src={ScannedCrop.image} alt="/" />

              <div className={`${ScannedCrop.healthyBoolean ? styles.healthyPlant : styles.notHealthy}`}>
                <p>{ScannedCrop.healthyBoolean ? "Healthy" : "Not Healthy"}</p>
              </div>

              <div className={styles.healthDesc}>
                <p>{ScannedCrop.healthyBoolean ? "No Disease" : ScannedCrop.diseaseName}</p>
                <p>||</p>
                <p>{ScannedCrop.dateTime}</p>
              </div>

              <div className={styles.center}>
                <button className={styles.viewMoreBtn} onClick={() => getId(ScannedCrop._id)}>
                  More Info
                </button>
              </div>
              
            </div>
          </div>
        </div>
      )
    })
  }
</div>

这样点击每个“More Info”按钮时，控制台就会打印出对应ScannedCrop的_id了。

内容的提问来源于stack exchange，提问作者Hadi Zouhbi