第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

事件返回未定義,試圖通過(guò)組件傳遞它

事件返回未定義,試圖通過(guò)組件傳遞它

千巷貓影 2023-08-24 17:18:14
我的標(biāo)題似乎沒(méi)有多大意義,讓我嘗試解釋一下。我有一個(gè)GameContainer包含一個(gè)ButtonContainer組件的組件。現(xiàn)在我ButtonContainer返回兩個(gè)按鈕,X 和 Y。我正在傳遞一個(gè)函數(shù) foo 例如,現(xiàn)在在我的 Game.js 文件中我將按鈕函數(shù)作為 props ( (e) => playGame(e)) 傳遞。我需要事件目標(biāo) id 來(lái)查看用戶是否按下了 X 或 Y。我遇到的問(wèn)題是當(dāng)我執(zhí)行以下代碼時(shí)undefined返回。游戲.jsconst playGame = (e) => {   console.log(e.target.id);}return (   <GameContainer buttonFn={(e) => playGame(e)} />);游戲容器.jsreturn (  <>    <p>Game name</p>    <ButtonContainer buttonFn={buttonFn} />  </>);ButtonContainer.jsreturn (  <>    <button onClick={buttonFn}>X</button>    <button onClick={buttonFn}>Y</button>  </>);我可以使用 redux,然后將狀態(tài)傳遞給我的 Game.js,但我覺(jué)得有一種更簡(jiǎn)單的方法可以做到這一點(diǎn)。e.target.id 在我的 Game.js 中運(yùn)行良好,但是當(dāng)我決定將代碼拆分為可重用組件并使用 props 時(shí),它返回 undefined。感謝任何幫助希望我的解釋有意義。
查看完整描述

1 回答

?
SMILET

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個(gè)贊

為按鈕添加value和。id


export default function App() {

  const playGame = (e) => {

    console.log(e.target.id);

  };

  return <GameContainer buttonFn={(e) => playGame(e)} />;

}


function GameContainer({ buttonFn }) {

  return (

    <>

      <p>Game name</p>

      <ButtonContainer buttonFn={buttonFn} />

    </>

  );

}


function ButtonContainer({ buttonFn }) {

  return (

    <>

      <button id="btn-1" value="btn-1" onClick={buttonFn}>

        X

      </button>

      <button id="btn-2" value="btn-2" onClick={buttonFn}>

        Y

      </button>

    </>

  );

}

代碼 - https://codesandbox.io/s/old-cloud-0deig?file=/src/App.js:51-592


查看完整回答
反對(duì) 回復(fù) 2023-08-24
  • 1 回答
  • 0 關(guān)注
  • 221 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)