ReactJS - API del componente

In questo capitolo, spiegheremo l'API del componente React. Discuteremo tre metodi:setState(), forceUpdate e ReactDOM.findDOMNode(). Nelle nuove classi ES6, dobbiamo associarlo manualmente. Noi useremothis.method.bind(this) negli esempi.

Imposta stato

setState()viene utilizzato per aggiornare lo stato del componente. Questo metodo non sostituirà lo stato, ma aggiungerà solo modifiche allo stato originale.

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
		
      this.state = {
         data: []
      }
	
      this.setStateHandler = this.setStateHandler.bind(this);
   };
   setStateHandler() {
      var item = "setState..."
      var myArray = this.state.data.slice();
	  myArray.push(item);
      this.setState({data: myArray})
   };
   render() {
      return (
         <div>
            <button onClick = {this.setStateHandler}>SET STATE</button>
            <h4>State Array: {this.state.data}</h4>
         </div>
      );
   }
}
export default App;

Abbiamo iniziato con un array vuoto. Ogni volta che si fa clic sul pulsante, lo stato verrà aggiornato. Se facciamo clic cinque volte, otterremo il seguente output.

Aggiornamento forzato

A volte potremmo voler aggiornare il componente manualmente. Ciò può essere ottenuto utilizzando ilforceUpdate() metodo.

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
   };
   forceUpdateHandler() {
      this.forceUpdate();
   };
   render() {
      return (
         <div>
            <button onClick = {this.forceUpdateHandler}>FORCE UPDATE</button>
            <h4>Random number: {Math.random()}</h4>
         </div>
      );
   }
}
export default App;

Stiamo impostando un numero casuale che verrà aggiornato ogni volta che si fa clic sul pulsante.

Trova Dom Node

Per la manipolazione DOM, possiamo usare ReactDOM.findDOMNode()metodo. Per prima cosa dobbiamo importarereact-dom.

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
   constructor() {
      super();
      this.findDomNodeHandler = this.findDomNodeHandler.bind(this);
   };
   findDomNodeHandler() {
      var myDiv = document.getElementById('myDiv');
      ReactDOM.findDOMNode(myDiv).style.color = 'green';
   }
   render() {
      return (
         <div>
            <button onClick = {this.findDomNodeHandler}>FIND DOME NODE</button>
            <div id = "myDiv">NODE</div>
         </div>
      );
   }
}
export default App;

Il colore di myDiv l'elemento diventa verde, una volta cliccato il pulsante.

Note - A partire dall'aggiornamento 0.14, la maggior parte dei metodi API dei componenti precedenti sono obsoleti o rimossi per supportare ES6.