onClick 事件侦听器在 Remix 中不起作用
onClick event listeners are not working in Remix
在我的 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.
确保您在根路径中从 Remix 渲染脚本组件,没有它您的应用程序将不会加载任何 JS 客户端。
在我的 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.
确保您在根路径中从 Remix 渲染脚本组件,没有它您的应用程序将不会加载任何 JS 客户端。