React 自作のコンポーネントにonClickが効かない

Question

自作のArticleコンポーネントにonClickを設定しているのに、Articleコンポーネント内で表示している文字列上でクリックしても
アラートが出ません。コメントアウトしてるh2タグ上の文字列をクリックしたときはアラートが出ます。
どのように解決するのでしょうか。ご教示お願いいたします。

import Article from './Article.jsx'

class Blog extends React.Component {
	
	
	constructor(props) {
		super(props);
		this.onClickButton = this.onClickButton.bind(this);
	}
	
	render() {
		return (
			<>
				<Article onClick={this.onClickButton} />
				{/* <h2 onClick={this.onClickButton}>onclick_test</h2> */}
			</>
		)
	}
	onClickButton = () => {
		alert('click')
	  };
	
}

export default Blog

Article.jsx

import React from 'react'

const Article = (props) => {
	return (
		<>
			<h2>Article compornent</h2>
		</>
	)
}

export default Article

Comments

[hoshi-takanori]

自作の Article コンポーネントのソースを見ないとなんとも言えません。
(Article コンポーネントのすべてのソースは不要ですが、最終的にどの HTML タグに onClick が設定されているかが問題です。)

[退会済みユーザー]

レスありがとうございます。
Article.jsxのソース追記しました。文字列をh2タグで囲っただけのものとなっています。
ただ少し変わったところといえばArticle コンポーネントはファンクショナルコンポーネントで作成されているという点でしょうか？

Answer 1

Article が返す h2 要素に onClick を設定しましょう。

const Article = (props) => {
    return (
        <>
            <h2 onClick={props.onClick}>Article compornent</h2>
        </>
    )
}

React のコンポーネントは JavaScript の中だけの存在で、ブラウザが実際に表示したり、イベントに反応したりするのはコンポーネントが返す h2 や div などの HTML 要素 (タグ) だけになります。ので、Article に onClick を設定してもそれだけでは何も起こらなくて、Article が返す h2 などに onClick を設定する必要があります。