onClick 事件侦听器在 Remix 中不起作用答案

【问题标题】：onClick event listeners are not working in RemixonClick 事件侦听器在 Remix 中不起作用
【发布时间】：2022-01-14 22:26:57
【问题描述】：

在我的 Remix 应用程序中，我尝试根据状态变量的值有条件地显示 UI 小部件。这是我的代码。

import { useState } from "react";
import type { LinksFunction } from "remix";
import stylesUrl from "../styles/index.css";

export const links: LinksFunction = () => {
  return [
    {
      rel: "stylesheet",
      href: stylesUrl
    }
  ];
};

export default function Index() {
  const [isMenuOpen,setMenuOpen] = useState(false)

  function toggleNav(){
    window.alert("hh") // no alert is shown
    console.log("hi") // no console statement is printed
    setMenuOpen(!isMenuOpen)
  }

  return (
    <div className="landing">
     <button onClick={toggleNav}>test</button>
    </div>
  );
}

但是，toggleNav 函数似乎不会在按钮单击时触发。我在控制台中看不到任何警报或输出。

我不明白为什么它不起作用。如果有人能指出我在这里做错了什么，那就太好了。 TIA。

【问题讨论】：

标签： javascript event-listener remix.run

【解决方案1】：

确保您在根路由中从 Remix 渲染 Scripts 组件，没有它您的应用将不会加载任何 JS 客户端。

见https://remix.run/docs/en/v1/api/remix#meta-links-scripts

【讨论】：