React.js의 루프에서 onclick 함수에 데이터를 전달하는 방법은 무엇입니까?

Question

먼저 코드를 입력하겠습니다.

{gameModes.map((gameMode, key) => {
            반품 (
              <>
                <div className={styles.gameMode} key={key} 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>
              </>
            );
          })}

onClick 기능

const gameModeHandler = (e) =>
    console.log(e.target.value)
  }

기본적으로 제가 원하는 것은 onClick이 적용될 때 gameMode.title을 onClick 함수에 전달하여 콘솔에 인쇄하는 것입니다. 루프에서 해당 데이터에 액세스할 수 있는 방식으로 onClick을 전달하는 방법을 모르겠습니다.

Answer 1

데이터를 전달하려면 두 번째 함수가 필요합니다: onClick={() => gameModeHandler(gameMode.title)}.

Answer 2

onClick 이벤트에 콜백 기능을 사용해야 합니다. 그에 따라 기능을 조정하세요.

onClick 이벤트

으아악

onClick 기능

으아악

그러나 루프에서 호출된 함수로 단일 개체를 전달하려는 경우 gameMode 개체를 gameModeHandler 함수에 매개변수로 전달할 수 있습니다.

onClick 이벤트 으아악

onClick 기능 으아악

그러면 개체에서

gameModeTitle;을 추출할 수 있습니다. 으아악