ReactJS - Moduli

In questo capitolo impareremo come usare i form in React.

Semplice esempio

Nell'esempio seguente, imposteremo un modulo di input con value = {this.state.data}. Ciò consente di aggiornare lo stato ogni volta che il valore di ingresso cambia. Stiamo usandoonChange evento che guarderà i cambiamenti di input e aggiornerà lo stato di conseguenza.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   render() {
      return (
         <div>
            <input type = "text" value = {this.state.data} 
               onChange = {this.updateState} />
            <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'));

Quando il valore del testo di input cambia, lo stato verrà aggiornato.

Esempio complesso

Nell'esempio seguente, vedremo come utilizzare i moduli dal componente figlio. onChange il metodo attiverà l'aggiornamento dello stato che verrà passato all'input figlio valuee renderizzato sullo schermo. Un esempio simile viene utilizzato nel capitolo Eventi. Ogni volta che dobbiamo aggiornare lo stato dal componente figlio, dobbiamo passare la funzione che gestirà l'aggiornamento (updateState) come sostegno (updateStateProp).

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   render() {
      return (
         <div>
            <Content myDataProp = {this.state.data} 
               updateStateProp = {this.updateState}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <input type = "text" value = {this.props.myDataProp} 
               onChange = {this.props.updateStateProp} />
            <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.