Come usare React.createRef()

Blog

Come usare React.createRef()

Se hai sviluppato applicazioni web abbastanza a lungo, è probabile che a un certo punto tu abbia utilizzato JavaScript GIUDIZIO biblioteche come jQuery , Mootools , Prototype.js , ecc. L'avvento di queste librerie ha determinato un cambiamento importante nel modo in cui sono state costruite le applicazioni web interattive. Con le API di astrazione DOM, la manipolazione dei contenuti di un'app Web è diventata molto più semplice.



Ad esempio, ti ritroverai a fare qualcosa del genere con jQuery:

$('#button').on('click', function(evt) { evt.preventDefault(); var content = $(' {/* Attach the created ref: this.inputField */} ) } }

Abbiamo apportato un paio di modifiche qui per la versione non controllata del nostro componente precedente. Per prima cosa creiamo un riferimento usando |_+_| e salvalo nella cartella |_+_| proprietà di istanza. Alleghiamo anche il riferimento al |_+_| elemento nel |_+_| metodo.



Usiamo anche il |_+_| prop per assegnare |_+_| come valore predefinito di |_+_| elemento — che è utile solo fino a quando il valore di input viene modificato per la prima volta.

Se avessimo usato |_+_| prop per specificare un valore predefinito per l'input, quindi non otterremo più valori aggiornati dall'input. Questo perché in React, il |_+_| prop sovrascrive automaticamente il valore nel DOM.



Infine, nel nostro gestore di eventi accediamo al valore dell'elemento di input utilizzando ref invece dell'oggetto evento. Quindi facciamo questo:

React.createRef()

invece di fare questo:

this.inputField

La demo è la stessa della versione controllata. Ecco una demo di esempio di come appare l'interazione:

Conclusione

In questo tutorial, abbiamo considerato vari metodi in cui possiamo interagire con il DOM in un'applicazione React. Abbiamo visto come possiamo usare il nuovo |_+_| metodo introdotto in React 16.3 per semplificare la creazione di riferimenti.

Abbiamo anche considerato come possiamo usare i riferimenti in componenti non controllati. Puoi fare riferimento a Documentazione di reazione per saperne di più su cosa puoi fare con i ref.

#reactjs #react-js #web-development