Différences

Ci-dessous, les différences entre deux révisions de la page.

--- dev:reactdiver [2021/12/28 13:10] – sbestel
+++ dev:reactdiver [2021/12/28 13:30] (Version actuelle) – sbestel
@@ Ligne 1: / Ligne 1: @@
+> console.log(id)
@@ Ligne 13: / Ligne 14: @@
 ===== THIS =====
-  handleclick() { console.log("this.state");  }
 === avec BIND ===
+  handleclick() { console.log("this.state");  }
   <button onClick={this.handleclick.bind(this)}>Cliquez moi</button>
-=== avec zero fonction ===
+=== avec zero fonction (plug de babel) ===
-        <button onClick={ () => this.handleclick()}>Cliquez moi</button>
+  handleclick() { console.log("this.state");  }
+  <button onClick={ () => this.handleclick()}>Cliquez moi</button>
-=== avec fonction fléchée ===
+=== avec fonction fléchée (plug de babel) ===
-   chandleclick = () => { console.log(this.state);}
+   handleclick = () => { console.log(this.state);}
    <button onClick={this.handleclick}>Cliquez moi</button>
+==== SETSTATE ====
+   handleclick = () => {
+    this.setState({compteur: this.state.compteur+1});
+    console.log(this.state);
+   }
+ ou
+  handleclick = () => {
+    const clients = this.state.clients.slice();
+    clients.push({id:4, nom: 'tete'});
+    this.setState({clients:clients})
+   };