Utilizzare la funzionalità ref all'interno di un component React

di , in HTML5, React,

In genere, il flusso di rendering di un component in React prevede che al cambio di un valore tra le props o lo state il component venga renderizzato da zero. Nella maggioranza dei casi questo flusso è più che sufficiente, ma esistono casi in cui non è così. Pensiamo ad esempio quando dobbiamo impostare il focus su un campo. In questi renderizzare nuovamente il component non è ammissibile, quindi dobbiamo ricorrere all'utilizzo del DOM.

Per ottenere un riferimento agli oggetti del DOM dobbiamo prima creare un oggetto ref e memorizzarlo in una variabile, e poi in fase di rendering assegnare l'oggetto del DOM alla variabile.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  render() {
    return <div ref={this.myRef} />;
  }
}

Per accedere all'oggetto del DOM, dobbiamo sfruttare la proprietà current di myRef.

Commenti

Visualizza/aggiungi commenti

Utilizzare la funzionalità ref all'interno di un component React (#282) 1010 1
| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi