React.js中如何在循环里为onClick传递数据？

这里有几种简单的方式可以让你的onClick函数拿到循环里的gameMode.gameModeTitle：

方法1：用箭头函数直接传参 #

修改循环里的onClick绑定，用箭头函数把gameMode.gameModeTitle作为参数传给handler：

{gameModes.map((gameMode, key) => {
  return (
    <>
      <div className={styles.gameMode} key={key} onClick={() => gameModeHandler(gameMode.gameModeTitle)}>
        <div className={styles.gameModeContent}>
          <img src={gameMode.gameModeArtwork} alt="" />
          <p className={styles.modeTitle}>{gameMode.gameModeTitle}</p>
          <p className={styles.modeDesc}>
            {gameMode.gameModeDesc}
          </p>
        </div>
      </div>
    </>
  );
})}

然后更新handler函数，直接接收title参数：

const gameModeHandler = (title) => {
  console.log(title)
}

如果需要同时拿到事件对象，也可以把e一起传进去：

onClick={(e) => gameModeHandler(e, gameMode.gameModeTitle)}

对应的handler：

const gameModeHandler = (e, title) => {
  console.log(title)
  // 也可以用e做其他操作
}

方法2：使用bind绑定参数 #

通过bind把gameMode.gameModeTitle绑定到handler上，触发时参数会自动传入：

{gameModes.map((gameMode, key) => {
  return (
    <>
      <div className={styles.gameMode} key={key} onClick={gameModeHandler.bind(null, gameMode.gameModeTitle)}>
        <div className={styles.gameModeContent}>
          <img src={gameMode.gameModeArtwork} alt="" />
          <p className={styles.modeTitle}>{gameMode.gameModeTitle}</p>
          <p className={styles.modeDesc}>
            {gameMode.gameModeDesc}
          </p>
        </div>
      </div>
    </>
  );
})}

handler同样接收title参数：

const gameModeHandler = (title) => {
  console.log(title)
}

如果需要事件对象，它会作为第二个参数传入：

const gameModeHandler = (title, e) => {
  console.log(title)
}

方法3：利用元素的dataset属性 #

把gameModeTitle存在元素的自定义数据属性里，再在handler中读取：

{gameModes.map((gameMode, key) => {
  return (
    <>
      <div className={styles.gameMode} key={key} data-title={gameMode.gameModeTitle} onClick={gameModeHandler}>
        <div className={styles.gameModeContent}>
          <img src={gameMode.gameModeArtwork} alt="" />
          <p className={styles.modeTitle}>{gameMode.gameModeTitle}</p>
          <p className={styles.modeDesc}>
            {gameMode.gameModeDesc}
          </p>
        </div>
      </div>
    </>
  );
})}

修改handler，通过currentTarget读取dataset：

const gameModeHandler = (e) => {
  const title = e.currentTarget.dataset.title
  console.log(title)
}

注意这里用currentTarget而非target，因为target可能指向内部的img或p标签，而currentTarget始终是绑定了onClick的那个div元素。

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