Escriu per cercar…

State

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

S'ensenya a
Llenguatges de marques i sistemes de gestió d’informacióDocuments dinàmicsDAMDAWDAW-BIO

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ó amb Google per llegir la pàgina completa.

Inicia sessió amb Google

Amb qualsevol compte de Google. Només et demanarem que acceptis les condicions del servei.