Menggunakan Refs pada Aplikasi React

Jika pada modul sebelumnya kita menggunakan perintah document.getElementById untuk mengakses element tertentu. Pada modul ini kita akan bahas penggunaan ref.

Perhatian, penggunaan document.getElementById bisa bermasalah, karena React memiliki lifecycle sendiri. Jadi bisa saja, element tersebut sudah didestroy, namun kita coba akses melalui perintah document.getElemenetById.

Pada file AppContent.js, modifikasi menjadi seperti berikut.

import React, {Component, Fragment} from 'react';
import Button from '@material-ui/core/Button';

export default class AppContent extends Component{
    constructor(props){
        super(props);
        this.listRef = React.createRef();
    }

    fetchData = () =>{
        fetch('https://jsonplaceholder.typicode.com/users')
            .then((response)=> response.json())
            .then (json=>{
                // let users = document.getElementById('users-list');
                const users = this.listRef.current;
                json.forEach(function (el) {
                    let li = document.createElement("li");
                    li.appendChild(document.createTextNode(el.username))
                    users.appendChild(li);
                });
            });
    }

    render(){
        return(
            <Fragment>
                <p>Content goes here</p>
                <Button onClick={this.fetchData} variant="contained" color="primary">Click Me</Button>
                <ul id="users-list" ref={this.listRef}></ul>
            </Fragment>
        );
    }
}

Pembahasan Code

Untuk menggunakan ref, definisikan pada constructor().

    constructor(props){
        super(props);
        this.listRef = React.createRef();
    }

Pada element target referensi, tambahkan attribute ref.

<ul id="users-list" ref={this.listRef}></ul>

Untuk mengakses ref element gunakan perintah berikut

const users = this.listRef.current;

Refs dapat diibaratkan document.getElementById versi React. Walaupun penggunaan ref memudahkan namun tidak disarankan setiap kasus digunakan.

Untuk lebih detail mengenai ref, silakan kunjungi dokumentasi dari React di https://reactjs.org/docs/refs-and-the-dom.html