[TypeScript]divタグをクリックした際にイベントを発火させたい

Question

聞きたいこと

divタグでラップしている自作コンポーネントをクリックしたタイミングでイベントを発火させたいと思っています。
onClickや onChange でイベントを発火させようと試みましたが、全く反応しません。

※下のコードのCheckboxが自作コンポーネントで、divタグを含むコンポーネントをreturnしています。

import * as React from "react";
import "./styles.css";
import { Checkbox } from "./Checkbox";

export default function App() {
  const [checked, setChecked] = React.useState(false);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <br />
      <Checkbox
        checked={checked}
        onChange={() => {
          setChecked(!checked);
        }}
        onClick={() => setChecked(!checked)}
      />
    </div>
  );
}

• Checkbox.tsx

import * as React from "react";
import styled from "styled-components";

const Icon = styled.svg`
  fill: none;
  stroke: white;
  stroke-width: 2px;
`;

const Wrapper = styled.div<{ checked: boolean }>`
  ${Icon} {
    visibility: ${(props) => (props.checked ? "visible" : "hidden")};
  }
`;

export const Checkbox = (props) => {
  console.log(props);
  return (
    <Wrapper checked={props.checked}>
      <input type="checkbox" />
      <Icon />
    </Wrapper>
  );
};

Comments

[maisumakun]

Checkboxの中身はどのようなものですか？

[sabx]

すいません、質問本文に追加しました。

Answer 1

onClickや onChange でイベントを発火させようと試みましたが、全く反応しません。

<Checkbox>の側でonClickやonChangeといったプロパティを一切参照していない以上、これらが呼ばれることはありません。

<Checkbox>内で各エレメントにイベントをセットして、それらがpropsに来たonClickやonChangeを呼び出すようにする、という流れにする必要があります（簡易的なものであれば、props.onClickをそのままエレメントのonClickにセットしてしまうのもありです）。