如何检测某个反应组件是否被点击

Question

I'm implementing a klondike game in which there are 4 empty stacks in the beiginning of the games. The page looks like the first picture. The top left 4 blocks are empty. I need the console to print out which component I clicked on. I tried to use the onclick event handler, but the "event.target" gives me nothing if I didn't click on a card, so When I clicked on those empty stack 1-4, I cannot know the result. Can anyonee help me solve the problem here? ( https://i.stack.imgur.com/9fApY.png )

Here's my main frame. Notice that Pile is another component and state.stack1-4 are state variables.

return (
            <GameBase onClick={onClick}>
                <CardRow>
                    <Pile cards={state.stack1} spacing={0} onClick={onClick}/>
                    <Pile cards={state.stack2} spacing={0} onClick={onClick}/>
                    <Pile cards={state.stack3} spacing={0} onClick={onClick}/>
                    <Pile cards={state.stack4} spacing={0} onClick={onClick}/>
                    <CardRowGap/>
                    <Pile cards={state.draw} spacing={0} onClick={onClick}/>
                    <Pile cards={state.discard} spacing={0} onClick={onClick}/>
                </CardRow>
                <CardRow>
                    <Pile cards={state.pile1} onClick={onClick}/>
                    <Pile cards={state.pile2} onClick={onClick}/>
                    <Pile cards={state.pile3} onClick={onClick}/>
                    <Pile cards={state.pile4} onClick={onClick}/>
                    <Pile cards={state.pile5} onClick={onClick}/>
                    <Pile cards={state.pile6} onClick={onClick}/>
                    <Pile cards={state.pile7} onClick={onClick}/>
                </CardRow>
                <div id="errorMsg"></div>
            </GameBase>
)

For other places that contain cards, because those cards locate in the certain state variable arrays, I can use cards to retrieve the array name.For example, pile6 and 7 contain cards so I can use the card ID to know it's in pile 7/pile6 (Code below are inside the Onclick Handler"):

    state.pile6.map(function (element, key) {
                if (`${element.suit}:${element.value}` === target.id) {
                    state.dst = "pile6";
                    state.targetIndex = key;
                    state.ValidArea = true;
                }
    });
    
    state.pile7.map(function (element, key) {
                if (`${element.suit}:${element.value}` === target.id) {
                    state.dst = "pile7";
                    state.targetIndex = key;
                    state.ValidArea = true;
                }
    });

But if I use similar code for stack, because it doesn't have cards, it will never be executed.

    state.stack1.map(function (element, key) {
       if (`${element.suit}:${element.value}` === target.id) {
             state.dst = "stack1";
             state.targetIndex = key;
             state.ValidArea = true;
        }
    });

Answer 1

The issue is you're trying to use the same onClick function for everything. You should make separate functions and paramaterize them so you know what got clicked on.

<GameBase onClick={handleGameBaseClick}>
      <CardRow>
          <Pile cards={state.stack1} spacing={0} onClick={()=>handleStackClick(1)}/>
          <Pile cards={state.stack2} spacing={0} onClick={()=>handleStackClick(2)}/>
          <Pile cards={state.stack3} spacing={0} onClick={()=>handleStackClick(3)}/>
          <Pile cards={state.stack4} spacing={0} onClick={()=>handleStackClick(4)}/>
          <CardRowGap/>
          <Pile cards={state.draw} spacing={0} onClick={handleDrawClick}/>
          <Pile cards={state.discard} spacing={0} onClick={handleDiscardClick}/>
      </CardRow>
      <CardRow>
          <Pile cards={state.pile1} onClick={()=>handlePileClick(1)}/>
          <Pile cards={state.pile2} onClick={()=>handlePileClick(2)}/>
          <Pile cards={state.pile3} onClick={()=>handlePileClick(3)}/>
          <Pile cards={state.pile4} onClick={()=>handlePileClick(4)}/>
          <Pile cards={state.pile5} onClick={()=>handlePileClick(5)}/>
          <Pile cards={state.pile6} onClick={()=>handlePileClick(6)}/>
          <Pile cards={state.pile7} onClick={()=>handlePileClick(7)}/>
      </CardRow>
      <div id="errorMsg"></div>
</GameBase>

function handleGameBaseClick() {
  console.log("You clicked somewhere on the board!");
}

function handleStackClick(id) {
  console.log("You clicked on stack:", id);
}

function handleDrawClick() {
  console.log("You clicked on the draw pile");
}

function handleDiscardClick() {
  console.log("You clicked on the discard pile");
}

function handlePileClick(id) {
  console.log("You clicked on pile:", id);
}

It may even be simpler to create separate functions for each pile / stack rather than a parameter.