buttonタグの中にonClickイベントを表示させたい

Question

React(createReactApp使っていない), typeScriptを用いて環境構築しています。

indexでクリックボタンを表示し、アラートを出すシンプルなコードを記述していますが、
buttonタグの中にonClickが表示されていないので、クリックしてもイベントが発生しません。
editor,ブラウザのコンソール上にエラーは表示されておりません。

以下のようなコードを作成しています。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('container')
);

import React from 'react';

const App = () => {
  const clickMe = () => {
    alert('test');
  };

  return (
    <>
      <p>Hello World</p>
      <button onClick={clickMe}>clickMe</button>
    </>
  );
};
export default App;

ブラウザ上ではbuttonタグは以下のように表示されています。

<button>clickMe</button>

補足情報（FW/ツールのバージョンなど）

構築手順

nodeインストール(v16)

--パッケージの初期化--------------------------------------------
yarn init

--パッケージのインストール--------------------------------------------
1 yarn add react
2 yarn add react-dom
3 yarn add react-router-dom
4 yarn add styled-components
5 yarn add -D typescript
6 yarn add -D webpack
7 yarn add -D webpack webpack-cli ts-loader
8 yarn add -D eslint
9 yarn add -D prettier
10 yarn add -D @types/react
11 yarn add -D @types/react-dom
12 yarn add -D @types/react-router-dom
13 yarn add -D @types/styled-components

--typescriptの設定--------------------------------------------
14 yarn tsc --init

--eslint,prettierの設定--------------------------------------------
15 yarn eslint --init
16 yarn add eslint-config-prettier
17 yarn add eslint-plugin-prettier

--ビルド--------------------------------------------
18 yarn webpack

※resourcesフォルダ配下にindex.htmlを作成しておく
--ビルドの自動化--------------------------------------------
19 yarn add -D clean-webpack-plugin html-webpack-plugin

--開発環境サーバを導入--------------------------------------------
20 yarn add -D webpack-dev-server
21 yarn webpack-dev-server

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.tsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /.tsx?$/,
        use: 'ts-loader',
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
devtool: 'eval-source-map',
  plugins: [
    new HtmlWebpackPlugin({
      template: 'resources/index.html',
    }),
  ],
  devServer: {
    static: path.join(__dirname, 'dist'),
    compress: true,
    historyApiFallback: true,
    open: true,
    port: 8080,
  },
};

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "DOM",
      "ES2019"
    ],
    "jsx": "react",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
  },
  "files": ["src/index.tsx"]
}
    

{
    "name": "test",
    "version": "0.0.0",
    "main": "index.js",
    "license": "NOLICENCED",
    "dependencies": {
        "@material-ui/core": "^4.12.3",
        "@material-ui/icons": "^4.11.2",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-prettier": "^4.0.0",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-router-dom": "^6.2.1",
        "styled-components": "^5.3.3"
    },
    "devDependencies": {
        "@types/react": "^17.0.37",
        "@types/react-dom": "^17.0.11",
        "@types/react-router-dom": "^5.3.2",
        "@types/styled-components": "^5.1.18",
        "@typescript-eslint/eslint-plugin": "^5.8.0",
        "@typescript-eslint/parser": "^5.8.0",
        "clean-webpack-plugin": "^4.0.0",
        "eslint": "^7.32.0",
        "eslint-config-standard": "^16.0.3",
        "eslint-plugin-import": "^2.25.3",
        "eslint-plugin-node": "^11.1.0",
        "eslint-plugin-promise": "^5.2.0",
        "eslint-plugin-react": "^7.27.1",
        "html-webpack-plugin": "^5.5.0",
        "prettier": "^2.5.1",
        "ts-loader": "^9.2.6",
        "typescript": "^4.5.4",
        "webpack": "^5.65.0",
        "webpack-cli": "^4.9.1",
        "webpack-dev-server": "^4.7.0"
    },
    "scripts": {
        "start": "yarn webpack-dev-server"
    }
}

dist配下のhtml

<!DOCTYPE html>
<html lang="jp">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>memo-map</title>
<script defer src="bundle.js"></script></head> ⇐**ビルド時に追加されている**

<body>
    <div id="container"></div>
    <script src="bundle.js"></script>
</body>

</html>

Comments

[FKM]

開発コンソールでなにかエラー出てますか？

[tttniaeefe]

エラー、警告文も全く出ていません。

[hoshi-takanori]

それで動きましたけど。(「createReactApp使っていない」というのが気になりますが…。)

[FKM]

react-nativeとか使っているのでしょうか？それともSDNでReactをローカルで動かしているのでしょうか？

[tttniaeefe]

windowsからwebpackを用いて動かしています。実際にどのように構築しているのかわからないと思いますので、質問文に設定ファイルなどを追記します。

[FKM]

strictModeを外して、通常設定にしたら動きますか？

[tttniaeefe]

動きませんでした。

[FKM]

インストールされているReactのバージョンはわかりますか？

[tttniaeefe]

17です。

[hoshi-takanori]

設定ファイルをコピペして動かしてみましたが、ちゃんと動きますね。(macOS の Safari ですが…。)
もしかして、localhost で「このページにこれ以上メッセージの作成を許可しない」をチェックしたとか？
https://www.pc-helper.tokyo/?p=96
alert を console.log にしてコンソールの出力を確認してみるといいかも。

[FKM]

index.htmlのIDはちゃんとcontainerになっていますか？

[tttniaeefe]

警告文等は特に出ていなかったので問題ないと思います。
containerにしております。気がかりなのが、dist配下のindex.htmlにbundle.jsが2つ存在することです。
headタグの中に<script defer src="bundle.js"></script>、bodyに<script src="bundle.js"></script>
</body>があります。

[FKM]

自分もVirtual Box内のreact-nativeで、レイアウト、コンポーネント内でテストしましたが、普通に動きました。そもそもReactが機能しているかuseEffectフックなどで、データのマウントが可能かテストしてみては？

[tttniaeefe]

useEffectはきちんと動いていました。イベントだけが反応しないですね。onclick以外のonchangeなども。

Answer 1

こんな感じで出来ると思います。

<button onClick={() => { onclick(); }}>clickMe</button>

自分は引数をもたせられないかなと検索した際に以下の記事が出てきました。

https://qiita.com/tsuuuuu_san/items/73747c8b6e6e28f6bd23

バックエンド？として動いているはずなのでユーザーが見えるソース上でonClickが出る必要はないです。

別解 こんな感じでもできるようです。

function clickMe() {
  alert("Hello");
}

<button onClick={clickMe}>Sign in with Google</button>

Comments

[tttniaeefe]

回答ありがとうございます。いずれの書き方も試しましたが、動きませんでした。

[zundaa]

もしかしたら基本構成が崩れてしまっているのかもしれませんね。
createReactAppで新規で別環境で試してみてください。