react 取得したpositionの値が更新されない

Question

クリックするとその場所のpositionが取得できるようにしたく、以下のように実装しました。
初回クリックをしたらpositionに値が入っているのですが、違う配列を押下してもpositionの値が変わりません。
わかる人いましたらご教授お願いしたいです

const CardPortal = styled(Card)<{ top: number; right: number }>`
  position: absolute;
  top: ${(props) => props.top}px;
  left: ${(props) => props.right}px;
`;
const Test: FunctionComponent = () => {
  const cardRef = useRef<HTMLDivElement>(null);
  const [positionTop, setPositionTop] = useState(0);
  const [positionRight, setPositionRight] = useState(0);
  const check = () => {
    console.log(positionTop);
    setPositionTop(cardRef.current.getBoundingClientRect().top);
    setPositionRight(cardRef.current.getBoundingClientRect().left);
  };
  const aaa = [1, 2, 3, 4];
  return (
    <>
      {aaa.map((aa) => (
        <div style={{ height: '100px', background: 'red' }} ref={cardRef} key={aa} onClick={check}>
          positionを取得
        </div>
      ))}
      <CardPortal height={300} width={250} top={positionTop} right={positionRight}></CardPortal>
    </>
  );
};
export default Test;

Answer 1

onClickの引数eを設定して、e.currentTargetでクリックされたエレメントを回収しましょう。

配列全部に同じcardRefを指定しているため、これは上書きされてしまいます（クリックしたものが適用されるわけではありません）。

Comments

[退会済みユーザー]

エレメントを取得できたのですが位置はどうやって取得できるのでしょうか？

[maisumakun]

エレメントを取得できたのであれば、あとのコードは元のコードと同様に実装するだけです。getBoundingClientRect()から取得してください。

[退会済みユーザー]

んーーよくわかりません。

[maisumakun]

元のコードではcardRef.current.getBoundingClientRect().topとなっていますが、それを(取得したエレメント).getBoundingClientRect().topとするだけです。

[退会済みユーザー]

ありがとうございます。理解できました