SolidJSS
SolidJS•3y ago•
12 replies
aryzing

What's the most idiomatic way of forwarding an onClick event handler?

Given a Button component that wraps a <button>, what's the best way to forward the onClick handler? Seems handlers can be functions or tuples. When passing the prop directly to the button,

<button onClick={props.onClick}>...</button>


the linter complains that props.onClick is reactive, but handlers are not

This is how I'm doing it currently,

export function Option(
  props: ParentProps<{
    onClick: JSX.HTMLElementTags["button"]["onClick"];
  }>,
) {
  const clickHandler: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> = (
    e,
  ) => {
    if (!props.onClick) return;

    if (typeof props.onClick === "function") return props.onClick(e);

    props.onClick[0](props.onClick[1], e);
  };
  return (
    <button
      type="button"
      onClick={clickHandler}
    >
      {props.children}
    </button>
  );
}
Was this page helpful?