S
SolidJS•8mo ago
AesthetiCoder

How is the type of the onclick event ?

Hello I have a question about the on-click method of the button, the event doesn't have a type, the type is something like this, is that the real type? it should be one type only for the event 
  const handleClick = (event: MouseEvent & {
    target: Element;
    currentTarget: HTMLButtonElement;
  }) =>
  {
    handleRipple(event);

    if(onclick)
    {
      onclick();
    }
  };

  return (
    <button
      onclick={handleClick}
    >
      {children}
    </button>
  );
  const handleClick = (event: MouseEvent & {
    target: Element;
    currentTarget: HTMLButtonElement;
  }) =>
  {
    handleRipple(event);

    if(onclick)
    {
      onclick();
    }
  };

  return (
    <button
      onclick={handleClick}
    >
      {children}
    </button>
  );
7 Replies
REEEEE
REEEEE•8mo ago
You can also use JSX.EventHandlerUnion< MouseEvent, HTMLButtonElement>
AesthetiCoder
AesthetiCoder•8mo ago
Type 'HTMLButtonElement' does not satisfy the constraint 'Event'. that dont wokr
aryzing
aryzing•8mo ago
typically target or currentTarget is what you want. I'm typing my handles as 
function myHandler(e: { currentTarget: HTMLInputElement }) {
  console.log(e.currentTarget.value)
}
function myHandler(e: { currentTarget: HTMLInputElement }) {
  console.log(e.currentTarget.value)
}
AesthetiCoder
AesthetiCoder•8mo ago
thats true, but this should have a type
aryzing
aryzing•8mo ago
From my exploration of the types library, I didn't find any. I found that the final type of the handler or the event is put together using various helper types in the types lib, but none of them are specifically the type of the event If you do find one, please let me know
REEEEE
REEEEE•8mo ago
It might be the other way around, JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> You use it like this. e will be typed properly then 
const handler: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> = (e) =>{}
const handler: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> = (e) =>{}
AesthetiCoder
AesthetiCoder•8mo ago
that does the trick, thanks
Want results from more Discord servers?
Add your server
More Posts
Loading CSS issue (FOUC) on optional parameterI have setup a simple website with below route. ``` src └── routes └── home └── index.Any advantages by tanstack libraries for solidjs users?I found that tanstack have some libraries support for solidjs. tanstack query, tanstack table, tanstSetting a deeply nested store property changes produces new reference for property's parent?Wanted to confirm the observed behavior I'm seeing when modifying deeply nested store properties. Can I avoid the getter while keeping the reactivity?```ts const [organization] = useSelectedOrganization(); const formatMoney = () => moneyFormatter(orCombining Solid store with query engine?My app needs to support a wide range of object queries and I want them to be fast, i.e. indexed. SomESLint error: ref is never reassigned, use constWith a farily simple practice app set up with TS + ESLint, there seems to be an issue when using refchildren.forEach typescript problemI have this problem in the forEach with typescript. Property 'forEach' does not exist on type 'ResoSolid Router with Suspense does not fire signalsI currently have a setup where a Router is wrapped in a Suspense and many routes are loaded with `laUsing pending & error states with createRouteActionI'm writing a `handleSubmit` function that, assuming the post request goes through, a user will be ndirect link?Hello. Is it possible to directly link to a page? If not, any suggestions? This is my App.jsx page.