찾다

 >  Q&A  >  본문

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

<p>먼저 코드를 입력하겠습니다. </p> <pre class="brush:php;toolbar:false;">{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> </> ); })}</pre> <p><strong>onClick 기능</strong></p> <pre class="brush:php;toolbar:false;">const gameModeHandler = (e) => console.log(e.target.value) }</pre> <p>기본적으로 제가 원하는 것은 onClick이 적용될 때 gameMode.title을 onClick 함수에 전달하여 콘솔에 인쇄하는 것입니다. 루프에서 해당 데이터에 액세스할 수 있는 방식으로 onClick을 전달하는 방법을 모르겠습니다. </p>
P粉523335026P粉523335026456일 전524

모든 응답(2)나는 대답할 것이다

  • P粉320361201

    P粉3203612012023-08-31 18:13:17

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

    회신하다
    0
  • P粉959676410

    P粉9596764102023-08-31 11:23:12

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

    onClick 이벤트

    으아악

    onClick 기능

    으아악

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

    onClick 이벤트 으아악

    onClick 기능 으아악

    그러면 개체에서

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

    회신하다
    0
  • 취소회신하다