反应 onClick 未在组件上触发

Question

I'm using Remix with React and TS.我正在将 Remix 与 React 和 TS 一起使用。 I have a simple class component called Map.tsx, that is used in index.tsx.我有一个简单的 class 组件，名为 Map.tsx，用于 index.tsx。

Map.tsx Map.tsx

class Map extends React.Component {
  constructor(props: any) {
    super(props);
    this.regionClicked = this.regionClicked.bind(this);
  }

  render() {
    return (
      <div>
        <button onClick={() => alert("ciao")}>a</button>
      </div>
    )
  }
}

index.tsx索引.tsx

import Map from "../components/index/map/Map";

class Index extends React.Component {
  constructor(props: any) {
    super(props);
  }

  render() {
    return (
      <div>
        <Map />
      </div>
    )
  }
}

Answer 1

I'm not sure what is your problem.我不确定你的问题是什么。 But in the file Map.tsx you need declare the method regionClicked or remove this line但是在文件Map.tsx中，您需要声明方法regionClicked或删除此行

class Map extends React.Component {
  constructor(props: any) {
    super(props);
    this.regionClicked = this.regionClicked.bind(this);
  }
  regionClicked() {
    alert("ciao");
  }
  render() {
    return (
      <div>
        <button onClick={this.regionClicked}>a</button>
      </div>
    );
  }
}

Answer 2

Fixed by using the tag in the root.tsx file.通过使用 root.tsx 文件中的标记进行修复。 Example available here此处提供示例

import { Scripts } from "remix";

function Document({ children }: { children: React.ReactNode; title?: string }) {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Header />
        {children}
        <Footer />
        <Scripts />
        {process.env.NODE_ENV === "development" ? <LiveReload /> : null}
      </body>
    </html>
  );
}

反应 onClick 未在组件上触发

问题描述

Map.tsx Map.tsx

index.tsx索引.tsx

2 个解决方案

解决方案1
0 2021-12-10 16:39:00

解决方案2
0 2021-12-10 16:52:31

反应 onClick 未在组件上触发

问题描述

Map.tsx Map.tsx

index.tsx索引.tsx

2 个解决方案

解决方案1 0 2021-12-10 16:39:00

解决方案2 0 2021-12-10 16:52:31

解决方案1
0 2021-12-10 16:39:00

解决方案2
0 2021-12-10 16:52:31