Typescript - Solid.js <select> onchange-hendelse: Egenskapen 'value' finnes ikke på typen 'EventTarget'

I det følgende eksempelet, hvis jeg ikke bruker ?. for event.target.value, får TypeScript feilen Object is possibly null. Med ?. får jeg feilen Property 'value' does not exist on type 'EventTarget'.

Hva må jeg gjøre for at typen til hendelsen for onchange skal være korrekt?

import { createSignal } from "solid-js";

export default function Cards() {
  const [cellsWide, setCellsWide] = createSignal(0);

  return (
    <>
      <div>
        <select
          name="cellsWide"
          onChange={(e: Event) => {
            console.log(e?.target?.value);
          }}
        >
          <option value="5">5</option>
          <option value="3">3</option>
        </select>
      </div>
      <div>This is where cards goes - {cellsWide()}</div>
    </>
  );

Svar #1

Hendelseshåndtereren bør se slik ut:

<select
  name="cellsWide"
  onChange={(e) => {
    console.log(e.currentTarget.value);
  }}
>

Forskjellen mellom target og currentTarget forklares på MDN her. target er elementet som utløste hendelsen, currentTarget er elementet som håndtereren er på. Dette betyr at streng tatt kan target ikke være elementet du definerte håndtereren på, det kan til og med ikke være et HTMLElement. Å bruke currentTarget er derfor det trygge alternativet.

Relaterte artikler