Escriu per cercar…

State

Els components sovint necessiten canviar el que apareix a la pantalla com a resultat d'una interacció.

Introducció

Crea un nou projecte amb el nom react-state:

shell
deno init --npm vite --template react-swc-ts react-state

Esdeveniment

React et permet afegir controladors d’esdeveniments al teu TSX.

A continuació tens un botó que quan hi fas clic no fa res:

tsx
export default function App() {

  return <button className="btn btn-primary m-5">No hago nada</button>
}

Un controlador d’esdeveniment és una funció que s’executarà quan l’usuari faci alguna cosa:

tsx
export default function App() {

  // Controlador de evento
  function handleClick() {
    alert("Bienvendio al Norte!")
  }

  return <button className="btn btn-primary m-5">No hago nada</button>
}

Pots confirmar que el botó no fa res i la funció mai s’executa 🥳

El botó té la propietat “nullable” onClick?, el valor de la qual és una funció que s’executarà quan l’usuari faci clic al botó:

tsx
export default function App() {

  // Controlador de evento
  function handleClick() {
    alert("Bienvendio al Norte!")
  }

  return <button className="btn btn-primary m-5" onClick={handleClick}>No hago nada</button>
}

Estàs llegint una vista prèvia.

Inicia sessió per llegir l'article complet. Qualsevol compte obre 4 articles gratuïts al mes; l'alumnat i el professorat llegeixen les pàgines del seu curs sense límit.

Inicia sessió