SolidJS•15mo ago

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•15mo ago

You can also use JSX.EventHandlerUnion< MouseEvent, HTMLButtonElement>

AesthetiCoderOP•15mo ago

Type 'HTMLButtonElement' does not satisfy the constraint 'Event'. that dont wokr

aryzing•15mo 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)
}

AesthetiCoderOP•15mo ago

thats true, but this should have a type

aryzing•15mo 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•15mo 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) =>{}

AesthetiCoderOP•15mo ago

that does the trick, thanks

Gaming

Programming

How is the type of the onclick event ?