PricingLoginStart free
React Academy · Oppitunti

Tapahtumien ja refien tyypitys TypeScriptissä

Käyttäkää React.ChangeEvent-, React.MouseEvent- ja RefObject-geneerisiä tyyppejä DOM-toimintoihin.

Oppitunti 2/413 vaihetta

Tapahtumien ja refien tyypitys TypeScriptissä on ilmainen React Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Academy-kurssilla on yhteensä 4 oppituntia.

Reactin synteettiset tapahtumat

React käärii natiivit DOM-tapahtumat SyntheticEvent-tyyppiin. Jokaisella tapahtumatyypillä on oma geneerinen tyyppinsä, kuten React.ChangeEvent<HTMLInputElement> ja React.MouseEvent<HTMLButtonElement>.

onChange-tyypitys

Yleisin tapahtuma on syötekenttien onChange. Tyypitä sen käsittelijä tyypillä React.ChangeEvent<HTMLInputElement>.

function SearchInput() {
  const [value, setValue] = useState('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value);
  };

  return <input value={value} onChange={handleChange} />;
}

onClick-tyypitys

Painikkeen napsautukset käyttävät tyyppiä React.MouseEvent<HTMLButtonElement>. Voit käyttää e.currentTarget-, e.preventDefault()- ja e.stopPropagation()-ominaisuuksia täysin tyypitettyinä.

function DeleteButton({ onDelete }: { onDelete: () => void }) {
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation();
    onDelete();
  };
  return <button onClick={handleClick}>Delete</button>;
}

onSubmit-tyypitys

Lomakkeen lähetyksessä käytetään tyyppiä React.FormEvent<HTMLFormElement>. Kutsu aina e.preventDefault()-metodia, jotta selaimen oletusarvoinen navigointi estyy.

function LoginForm() {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const form = e.currentTarget;
    const email = (form.elements.namedItem('email') as HTMLInputElement).value;
    console.log(email);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input name="email" />
      <button type="submit">Login</button>
    </form>
  );
}

Näppäimistötapahtumien tyypittäminen

Tyypitä näppäimistön tapahtumankäsittelijät tyypillä React.KeyboardEvent<HTMLElement>. Näin voit käyttää ominaisuuksia e.key, e.code ja e.ctrlKey turvallisesti.

function CommandInput() {
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter' && e.metaKey) {
      submitCommand();
    }
  };
  return <input onKeyDown={handleKeyDown} />;
}

useRef DOM-elementeille

Välitä HTML-elementin tyyppi useRef-kutsun geneeriseksi tyypiksi ja alusta se arvoon null. Tällöin TypeScript tietää, että ref sisältää kyseisen elementtityypin.

function AutoFocusInput() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} />;
}

Muuttuva ref ja DOM-ref

Kun tallennat muuttuvan arvon etkä DOM-solmua, alusta useRef arvolla null-arvon sijaan. TypeScript päättelee refistä muuttuvan MutableRefObject-olion.

// DOM ref (read-only current)
const divRef = useRef<HTMLDivElement>(null);

// Mutable ref (read-write current)
const countRef = useRef<number>(0);
countRef.current += 1; // ✓ no TypeScript error

useImperativeHandle-tyypitys

Kun paljastat ref-rajapinnan lapsikomponentista, määritä kahvaa varten interface ja käytä sitä sekä forwardRef- että useImperativeHandle-kutsussa.

interface DialogHandle {
  open: () => void;
  close: () => void;
}

const Dialog = forwardRef<DialogHandle, { title: string }>((props, ref) => {
  useImperativeHandle(ref, () => ({
    open: () => console.log('open'),
    close: () => console.log('close'),
  }));
  return <div>{props.title}</div>;
});

Ref-callbackit

Ref-callback vastaanottaa DOM-elementin tai arvon null. Tyypitä se muodossa (node: HTMLElement | null) => void.

function MeasureDiv() {
  const [height, setHeight] = useState(0);

  const measuredRef = (node: HTMLDivElement | null) => {
    if (node) setHeight(node.getBoundingClientRect().height);
  };

  return <div ref={measuredRef}>Content: {height}px tall</div>;
}

Event target ja current target

e.target on tapahtuman käynnistänyt elementti, kun taas e.currentTarget on elementti, johon käsittelijä on liitetty. Tee e.target-arvolle tyyppimuunnos, kun tarvitset tiettyjä ominaisuuksia.

const handleClick = (e: React.MouseEvent<HTMLUListElement>) => {
  const target = e.target as HTMLLIElement;
  console.log(target.dataset.id);
};

Geneerinen tapahtumankäsittelijän tyyppi

Voit kirjoittaa uudelleenkäytettäviä tapahtumankäsittelijäfunktioita käyttämällä geneeristä tyyppiä React.EventHandler<Event> tai kirjoittamalla koko funktiosignatuurin suoraan.

type InputChangeHandler = React.ChangeEventHandler<HTMLInputElement>;

const logChange: InputChangeHandler = (e) => {
  console.log(e.target.value); // e is fully typed
};

Pikatarkistus

Mitä TypeScript-tyyppiä tulisi käyttää useRef-refille, joka sisältää HTMLInputElement-elementin?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Tyypitä tapahtumankäsittelijät React.ChangeEvent-, React.MouseEvent- ja React.FormEvent-geneerisillä tyypeillä. Tyypitä DOM-refit muodossa useRef<HTMLElement>(null) ja muuttuvat refit niiden sisältämän arvon tyypillä. Käytä forwardRef-kutsua ja eksplisiittistä kahva-interfacea imperatiivisia rajapintoja varten.

Aloita maksutta

Opi React tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit
88
Oppitunnit
324
Aloita opiskelu maksuttaNäytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Tapahtumien ja refien tyypitys TypeScriptissä” ilmainen?

Kyllä – oppitunnin ”Tapahtumien ja refien tyypitys TypeScriptissä” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Academy-kurssin, päivitä CoddyKit PROhon. React Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Tapahtumien ja refien tyypitys TypeScriptissä”?

Käyttäkää React.ChangeEvent-, React.MouseEvent- ja RefObject-geneerisiä tyyppejä DOM-toimintoihin. Harjoittelet React Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni React Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin React Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Tapahtumien ja refien tyypitys TypeScriptissä”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä React Academy-oppitunnilla?

Kyllä. Jokainen React Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

  1. Propsien ja komponenttien paluutyyppien tyypitys
  2. Tapahtumien ja refien tyypitys TypeScriptissä
  3. Geneeriset komponentit ja utiliteettityypit
  4. Contextien ja Custom Hooksien tyypitys
← Takaisin: React Academy