React Refs

  • Post
    React Refs

    Ref adalah singkatan yang digunakan untuk references di React. Ini mirip dengan key di React. Ini adalah atribut yang memungkinkan untuk menyimpan referensi ke node DOM atau elemen React tertentu. Ini menyediakan cara untuk mengakses node React DOM atau elemen React dan bagaimana berinteraksi dengannya. Ini digunakan ketika kita ingin mengubah nilai komponen anak, tanpa menggunakan props.

    Kapan Menggunakan Referensi

    Referensi dapat digunakan dalam kasus berikut:

    • Saat kita membutuhkan pengukuran DOM seperti mengelola fokus, pemilihan teks, atau pemutaran media.
    • Ini digunakan dalam memicu animasi imperatif.
    • Saat berintegrasi dengan pustaka DOM pihak ketiga.
    • Itu juga dapat digunakan seperti pada panggilan balik.

    Kapan tidak menggunakan Referensi

    • Penggunaannya harus dihindari untuk apa pun yang dapat dilakukan secara deklaratif . Misalnya, alih-alih menggunakan metode open () dan close () pada komponen Dialog, Anda harus meneruskan prop isOpen ke sana.
    • Anda harus menghindari penggunaan Ref secara berlebihan.

    Cara membuat Referensi

    Di React, Refs bisa dibuat dengan menggunakan React.createRef () . Itu dapat ditugaskan ke elemen React melalui atribut ref . Ini biasanya ditetapkan ke properti instance ketika sebuah komponen dibuat, dan kemudian dapat direferensikan ke seluruh komponen.

    1. classMyComponent extendsComponent {
    2. constructor(props) {
    3. super(props);
    4. this.callRef = React.createRef();
    5. }
    6. render() {
    7. return <div ref={this.callRef} />;
    8. }
    9. }

    Cara mengakses Refs

    Dalam React, ketika ref dilewatkan ke elemen di dalam metode render, referensi ke node dapat diakses melalui atribut ref saat ini.

    1. node const =  this.callRef.current;

    Refs Properti saat ini

    Nilai ref berbeda-beda bergantung pada jenis node:

    • Ketika atribut ref digunakan dalam elemen HTML, ref yang dibuat dengan React.createRef () menerima elemen DOM yang mendasari sebagai propertinya saat ini.
    • Jika atribut ref digunakan pada komponen kelas kustom, maka objek ref menerima turunan komponen yang dipasang sebagai propertinya saat ini.
    • Atribut ref tidak dapat digunakan pada komponen fungsi karena tidak memiliki instance.

    Tambahkan Ref ke elemen DOM

    Dalam contoh di bawah ini, kami menambahkan ref untuk menyimpan referensi ke node atau elemen DOM.

    1. importReact, { Component } from ‘react’;
    2. import{ render } from ‘react-dom’;
    3. classApp extendsComponent {
    4. constructor(props) {
    5. super(props);
    6. this.callRef = React.createRef();
    7. this.addingRefInput = this.addingRefInput.bind(this);
    8. }
    9. addingRefInput() {
    10. this.callRef.current.focus();
    11. }
    12. render() {
    13. return(
    14. <div>
    15. <h2>Adding Ref to DOM element</h2>
    16. <input
    17. type=”text”
    18. ref={this.callRef} />
    19. <input
    20. type=”button”
    21. value=”Add text input”
    22. onClick={this.addingRefInput}
    23. />
    24. </div>
    25. );
    26. }
    27. }
    28. export defaultApp;

     

    Tambahkan Ref ke komponen Kelas

    Dalam contoh di bawah ini, kami menambahkan referensi untuk menyimpan referensi ke komponen kelas.

    Contoh

    1. importReact, { Component } from ‘react’;
    2. import{ render } from ‘react-dom’;
    3. function CustomInput(props) {
    4. let callRefInput = React.createRef();
    5. function handleClick() {
    6. current.focus();
    7. }
    8. return(
    9. <div>
    10. <h2>Adding Ref to Class Component</h2>
    11. <input
    12. type=”text”
    13. ref={callRefInput} />
    14. <input
    15. type=”button”
    16. value=”Focus input”
    17. onClick={handleClick}
    18. />
    19. </div>
    20. );
    21. }
    22. classApp extendsComponent {
    23. constructor(props) {
    24. super(props);
    25. this.callRefInput = React.createRef();
    26. }
    27. focusRefInput() {
    28. this.callRefInput.current.focus();
    29. }
    30. render() {
    31. return(
    32. <CustomInput ref={this.callRefInput} />
    33. );
    34. }
    35. }
    36. export defaultApp;

     

    Callback Refs

    Dalam react, ada cara lain untuk menggunakan ref yang disebut ” callback refs ” dan memberikan kontrol lebih saat ref disetel dan tidak disetel . Alih-alih membuat ref dengan metode createRef (), React mengizinkan cara untuk membuat ref dengan meneruskan fungsi callback ke atribut ref dari sebuah komponen. Ini terlihat seperti kode di bawah ini.

    1. <input type = “text” ref = {element =>  this .callRefInput = element} />

    Fungsi callback digunakan untuk menyimpan referensi ke node DOM dalam properti instance dan dapat diakses di tempat lain. Itu dapat diakses seperti di bawah ini:

    1. rt React, { Component } from ‘react’;
    2. import { render } from ‘react-dom’;
    3. class App extends React.Component {
    4.     constructor(props) {
    5.     super(props);
    6.     this.callRefInput = null;
    7.     this.setInputRef = element => {
    8.       this.callRefInput = element;
    9.     };
    10.     this.focusRefInput = () => {
    11.       //Focus the input using the raw DOM API
    12.       if (this.callRefInput) this.callRefInput.focus();
    13.     };
    14.   }
    15.   componentDidMount() {
    16.     //autofocus of the input on mount
    17.     this.focusRefInput();
    18.   }
    19.   render() {
    20.     return (
    21.       <div>
    22.     <h2>Callback Refs Example</h2>
    23.         <input
    24.           type=”text”
    25.           ref={this.setInputRef}
    26.         />
    27.         <input
    28.           type=”button”
    29.           value=”Focus input text”
    30.           onClick={this.focusRefInput}
    31.         />
    32.       </div>
    33.     );
    34.   }
    35. }
    36. export default App;

     

    Dalam contoh di atas, React akan memanggil callback “ref” untuk menyimpan referensi ke elemen DOM input saat komponen dipasang , dan saat komponen dilepas , panggil dengan null . Referensi selalu terbaru sebelum componentDidMount atau componentDidUpdate diaktifkan. Callback ref pass antar komponen sama seperti Anda dapat bekerja dengan object refs, yang dibuat dengan React.createRef ().

     

    Meneruskan Ref dari satu komponen ke komponen lainnya

    Penerusan ref adalah teknik yang digunakan untuk meneruskan ref melalui komponen ke salah satu komponen anaknya. Ini dapat dilakukan dengan memanfaatkan metode React.forwardRef () . Teknik ini sangat berguna dengan komponen tingkat tinggi dan secara khusus digunakan di pustaka komponen yang dapat digunakan kembali. Contoh paling umum diberikan di bawah ini.

    Contoh

    1. import React, {Component} from  ‘react’ ;
    2. impor {render} from  ‘react-dom’ ;
    3. const TextInput = React.forwardRef ((props, ref) => (
    4. <input type = “text”  placeholder = “Hello World”  ref = {ref} />
    5. ));
    6. const inputRef = React.createRef ();
    7. class CustomTextInput  extends Component {
    8. handleSubmit = e => {
    9. preventDefault ();
    10. log (inputRef.current.value);
    11. };
    12. render () {
    13. return(
    14. <div>
    15. <form onSubmit = {e =>  this .handleSubmit (e)}>
    16. <TextInput ref = {inputRef} />
    17. <button> Kirim </button>
    18. </form>
    19. </div>
    20. );
    21. }
    22. }
    23. export   Aplikasi default ;

    Pada contoh di atas, ada komponen TextInput yang memiliki anak sebagai field input. Sekarang, untuk meneruskan atau meneruskan ref ke input, pertama, buat ref dan kemudian teruskan ref Anda ke <TextInput ref = {inputRef}> . Setelah itu, React meneruskan ref ke fungsi forwardRef sebagai argumen kedua. Selanjutnya, kami meneruskan argumen ref ini ke <input ref = {ref}> . Sekarang, nilai dari simpul DOM dapat diakses di inputRef.current .

    React dengan useRef ()

    Ini diperkenalkan di React 16.7 dan versi di atasnya. Ini membantu untuk mendapatkan akses ke simpul atau elemen DOM, dan kemudian kita dapat berinteraksi dengan simpul atau elemen DOM seperti memfokuskan elemen masukan atau mengakses nilai elemen masukan. Ini mengembalikan objek ref yang properti .currentnya diinisialisasi ke argumen yang diteruskan. Objek yang dikembalikan bertahan selama masa pakai komponen.

    Sintak

    1. const refContainer = useRef (initialValue);

    Contoh

    Dalam kode di bawah ini, useRef adalah fungsi yang ditugaskan ke variabel, inputRef , dan kemudian dilampirkan ke atribut yang disebut ref di dalam elemen HTML yang ingin Anda rujuk.

    1. function useRefExample () {
    2. const  inputRef = useRef ( null );
    3. const  onButtonClick = () => {
    4. current.focus ();
    5. };
    6. return (
    7. <>
    8. <input ref = {inputRef} type = “text”  />
    9. <button onClick = {onButtonClick}> Kirim </button>
    10. </>
    11. );
    12. }

    credit. javatpoint

     

Tagged: 

  • You must be logged in to reply to this topic.