Mój tytuł wydaje się, że nie ma znaczenia, pozwól mi spróbować wyjaśnić.

Mam komponent GameContainer, który zawiera komponent ButtonContainer.

Teraz mój ButtonContainer zwraca dwa przyciski, X i Y. Przepuszczam funkcję Foo dla np. Teraz w moim pliku Potrzebuję identyfikatora docelowego zdarzenia, aby sprawdzić, czy użytkownik naciśnie X lub Y.

Problem, który mam, jest wtedy, gdy wykonuję poniższy kod {X0}} jest zwracany.

Game.js

const playGame = (e) => {
   console.log(e.target.id);
}
return (
   <GameContainer buttonFn={(e) => playGame(e)} />
);

Gamecontainer.js.

return (
  <>
    <p>Game name</p>
    <ButtonContainer buttonFn={buttonFn} />
  </>
);

Guzikontainer.js.

return (
  <>
    <button onClick={buttonFn}>X</button>
    <button onClick={buttonFn}>Y</button>
  </>
);

Mogę użyć Redux, a następnie przekazać stan do mojej gry.js, ale czuję, że jest łatwiejszy sposób na to. E.Target.id działał w porządku w mojej grze

Każda pomoc jest doceniona Mam nadzieję, że moje wyjaśnienie ma sens.

0
chickencoop 22 listopad 2020, 20:45

1 odpowiedź

Najlepsza odpowiedź

Dodaj przycisk value i 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>
    </>
  );
}

Kod - https://codesandbox.io /s/old-cloud-0deig?file=/src/app.js:51-592.

0
Sarun UK 22 listopad 2020, 18:15