Lekce 1.X

React Event Handler Mistakes

Deklarativní povaha Reactu dělá vytváření UI intuitivní, ale zpracování uživatelských interakcí—eventů—často mate vývojáře nové ve frameworku (nebo i zkušené, kteří pracují rychle).

Na rozdíl od standardního HTML, React používá svůj vlastní syntetický event systém. I když je výkonný, přichází s konkrétními pravidly týkajícími se syntaxe, rozsahu a provádění.

Pojďme otestovat vaše znalosti čtyřmi rychlými scénářovými otázkami.

1

Otázka 1: Kontrola syntaxe

Jak správně připojíme definovanou funkci handleClick event handleru k button elementu v JSX?

jsx
function Btn () {
  const handleClick = () => {
    console.log('clicked')
  }

  return (
    // Which option goes here?
    <button ... >
      Submit
    </button>
  )
}
Vyberte správnou odpověď:

A) <button handleClick={handleClick}>

B) <button onClick={handleClick}>

C) <button @click={handleClick}>

D) <button [click]={handleClick}>

2

Otázka 2: Past při provádění

Jaký je kritický problém v následujícím kódu?

jsx
function Btn () {
  const handleClick = () => {
    console.log('clicked')
  }

  return (
    // Pay close attention here:
    <button onClick={handleClick()}>
      Submit
    </button>
  )
}
Vyberte správnou odpověď:

A) Nic není špatně.

B) onClick přijímá řetězec, "handleClick()", ne funkci.

C) onClick přijímá referenci funkce, ne výsledek volání funkce.

D) onClick přijímá řetězec, "handleClick", ne funkci.

3

Otázka 3: Rozsah a closure

Co se stane, když se klikne na tlačítko v následujícím kódu?

jsx
// Note: this function is defined OUTSIDE the component
const handleClick = () => alert(message)

function AlertButton({ message }) {
  return (
    <button onClick={handleClick}>
      Click Me
    </button>
  )
}

export default function App () {
  return (
    <AlertButton message="Hello, world!" />
  )
}
Vyberte správnou odpověď:

A) Zobrazí "Hello World!"

B) Zobrazí undefined

C) Nic, dostanete Reference Error v konzoli.

D) Zobrazí Synthetic Event objekt.

4

Otázka 4: Mýtus o výkonu?

Pravda nebo Nepravda: Umístění event handler funkcí do těla komponenty povede k problémům s výkonem, protože React bude muset tyto funkce znovu vytvářet při každém renderu.

Pravda nebo Nepravda?

A) Nepravda (většinou)

B) Pravda