Skip to content

Commit a061c89

Browse files
lssmndeblasis
authored andcommitted
Move code samples in "Handling Events" (#114)
* Moved code samples in "Handling Events" * Removed trailing comma change
1 parent df3327f commit a061c89

File tree

2 files changed

+38
-7
lines changed

2 files changed

+38
-7
lines changed

content/docs/handling-events.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -58,40 +58,40 @@ In questo esempio, il parametro `e` è un evento sintetico (_synthetic event_).
5858

5959
Usando React, in generale, non dovresti aver bisogno di chiamare `addEventListener` per aggiungere listeners ad un elemento DOM dopo la sua creazione. Invece, basta fornire un listener quando l'elemento è inizialmente renderizzato.
6060

61-
Quando definisci un componente usando una [classe ES6](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Classes), un pattern comune è usare un metodo della classe come gestore di eventi. Ad esempio, questo componente `Toggle` renderizza un pulsante che consente all'utente di alternare gli stati "ON" e "OFF":
61+
Quando definisci un componente usando una [classe ES6](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Classes), un pattern comune è usare un metodo della classe come gestore di eventi. Ad esempio, questo componente `Interruttore` renderizza un pulsante che consente all'utente di alternare gli stati "Acceso" e "Spento":
6262

6363
```js{6,7,10-14,18}
64-
class Toggle extends React.Component {
64+
class Interruttore extends React.Component {
6565
constructor(props) {
6666
super(props);
67-
this.state = {isToggleOn: true};
67+
this.state = {acceso: true};
6868
6969
// Necessario per accedere al corretto valore di `this` all'interno della callback
7070
this.handleClick = this.handleClick.bind(this);
7171
}
7272
7373
handleClick() {
7474
this.setState(state => ({
75-
isToggleOn: !state.isToggleOn
75+
acceso: !state.acceso
7676
}));
7777
}
7878
7979
render() {
8080
return (
8181
<button onClick={this.handleClick}>
82-
{this.state.isToggleOn ? 'ON' : 'OFF'}
82+
{this.state.acceso ? 'Acceso' : 'Spento'}
8383
</button>
8484
);
8585
}
8686
}
8787
8888
ReactDOM.render(
89-
<Toggle />,
89+
<Interruttore />,
9090
document.getElementById('root')
9191
);
9292
```
9393

94-
[**Provalo su CodePen**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010)
94+
**[Prova su CodeSandbox](codesandbox://handling-events/1.js)**
9595

9696
Fai attenzione al valore di `this` nelle callback JSX. In JavaScript, i metodi delle classi non sono [associati](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_objects/Function/bind) (_bound_) di default. Se dimentichi di applicare `bind` a `this.handleClick` e di passarlo a `onClick`, `this` sarà `undefined` quando la funzione verrà effettivamente chiamata.
9797

examples/handling-events/1.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
4+
class Interruttore extends React.Component {
5+
constructor(props) {
6+
super(props);
7+
this.state = {acceso: true};
8+
9+
// Necessario per accedere al corretto valore di `this` all'interno della callback
10+
this.handleClick = this.handleClick.bind(this);
11+
}
12+
13+
handleClick() {
14+
this.setState(state => ({
15+
acceso: !state.acceso,
16+
}));
17+
}
18+
19+
render() {
20+
return (
21+
<button onClick={this.handleClick}>
22+
{this.state.acceso ? 'Acceso' : 'Spento'}
23+
</button>
24+
);
25+
}
26+
}
27+
28+
ReactDOM.render(
29+
<Interruttore />,
30+
document.getElementById('root')
31+
);

0 commit comments

Comments
 (0)