diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md index c2e6943e0..8f2a180e6 100644 --- a/content/docs/handling-events.md +++ b/content/docs/handling-events.md @@ -58,13 +58,13 @@ In questo esempio, il parametro `e` è un evento sintetico (_synthetic event_). 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. -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": +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": ```js{6,7,10-14,18} -class Toggle extends React.Component { +class Interruttore extends React.Component { constructor(props) { super(props); - this.state = {isToggleOn: true}; + this.state = {acceso: true}; // Necessario per accedere al corretto valore di `this` all'interno della callback this.handleClick = this.handleClick.bind(this); @@ -72,26 +72,26 @@ class Toggle extends React.Component { handleClick() { this.setState(state => ({ - isToggleOn: !state.isToggleOn + acceso: !state.acceso })); } render() { return ( ); } } ReactDOM.render( - , + , document.getElementById('root') ); ``` -[**Provalo su CodePen**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010) +**[Prova su CodeSandbox](codesandbox://handling-events/1.js)** 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. diff --git a/examples/handling-events/1.js b/examples/handling-events/1.js new file mode 100644 index 000000000..385126be0 --- /dev/null +++ b/examples/handling-events/1.js @@ -0,0 +1,31 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +class Interruttore extends React.Component { + constructor(props) { + super(props); + this.state = {acceso: true}; + + // Necessario per accedere al corretto valore di `this` all'interno della callback + this.handleClick = this.handleClick.bind(this); + } + + handleClick() { + this.setState(state => ({ + acceso: !state.acceso, + })); + } + + render() { + return ( + + ); + } +} + +ReactDOM.render( + , + document.getElementById('root') +);