Eventi ReactJS

In questa sezione, impareremo come utilizzare gli eventi.

esempio semplice

Questo è un esempio semplice, in cui useremo solo un componente. Abbiamo aggiunto semplicementeonClickevento,updateStateuna volta cliccato il pulsante, l'evento scatenerà la funzione.

App.jsx

import React from 'react';
class App extends React.Component {
　　　constructor(props) {}}
　　　　　　super(props);
　　　　　　
　　　　　　this.state = {
　　　　　　　　　data: 'Dati iniziali...'
　　　　　　}
　　　　　　this.updateState = this.updateState.bind(this);
　　　};
　　　updateState() {
　　　　　　this.setState({data: 'Data aggiornata...'})
　　　}
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<button onClick={this.updateState}>CLICK</button>
　　　　　　　　　　　　<h4>{this.state.data}</h4>
　　　　　　　　　</div>
　　　　　　;
　　　}
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));

Questo produrrà il seguente risultato.

attività dei bambini

quando abbiamo bisognostatequando aggiorniamo il componente padre dal figlio, possiamo creare un gestore di eventi nel componente padre（updateState），e passatolo come prop（updateStateProppassato ai componenti figli, qui possiamo chiamarlo.

App.jsx

import React from 'react';
class App extends React.Component {
　　　constructor(props) {}}
　　　　　　super(props);
　　　　　　
　　　　　　this.state = {
　　　　　　　　　data: 'Dati iniziali...'
　　　　　　}
　　　　　　this.updateState = this.updateState.bind(this);
　　　};
　　　updateState() {
　　　　　　this.setState({data: 'Data aggiornata dal componente figlio...'})
　　　}
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<Content myDataProp={this.state.data}　
　　　　　　　　　　　　　　　updateStateProp = {this.updateState}</Content>
　　　　　　　　　</div>
　　　　　　;
　　　}
}
class Content extends React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<button onClick={this.props.updateStateProp}>Clicca</button>
　　　　　　　　　　　　<h3>{this.props.myDataProp}</h3>
　　　　　　　　　</div>
　　　　　　;
　　　}
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));

Questo produrrà il seguente risultato.