javascript - onClick event listeners are not working in Remix - Stack Overflow

admin管理员组

文章数量:1242887

In my Remix app, I'm trying to conditionally display a UI widget, based on the value of a state variable. Here is my code.

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>
  );
}

However, toggleNav function doesn't seem to be triggered on button click. I couldn't see any alert or output in the console.

I couldn't understand why it's not working. It would be great, if someone can point me out what I'm doing wrong here. TIA.

In my Remix app, I'm trying to conditionally display a UI widget, based on the value of a state variable. Here is my code.

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>
  );
}

However, toggleNav function doesn't seem to be triggered on button click. I couldn't see any alert or output in the console.

I couldn't understand why it's not working. It would be great, if someone can point me out what I'm doing wrong here. TIA.

• javascript
• event-listener
• remix.run

Share Improve this question Follow asked Dec 10, 2021 at 7:16 PavinduPavindu 3,11288 gold badges5252 silver badges8787 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 15

Ensure that you are rendering the Scripts ponent from Remix in the root route, without it you app will not load any JS client side.

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

本文标签： javascriptonClick event listeners are not working in RemixStack Overflow