Ref adalah fungsi yang digunakan untuk memberikan nilai reference pada element. bagaimankah cara mendapatkan reference dari suatu elemen pada dom pada React ? Silakan simak ulasan berikut ini.
Selayang pandang
Mendapatkan references dari suatu elemen pada dom sangat bermanfaat. Misalnya untuk mereset nilai dari suatu input form ataupun melakukan perubahan pada attribute dari elemen tersebut. Kode yang digunakan untuk mendapatkan ref dari suatu elemen adalah
ReactDOMfindDomNode()
Fungsi reactDOM.findDomNode() diatas hanya dapat berjalan jika komponen yang menjadi “container” dari elemen tersebut telah dimounting ke dalam DOM. Sebelum komponen belum masuk (mounted) pada DOM fungsi diatas tidak dapat berjalan. Sehingga pastikan meletakannya sesuai dengan lifecyclenya.
Elemen yang dapat diambil nilai referencesnya haruslah diberikan tag “ref” dengan menuliskan attribute ref di syntaxnya. Ini artinnya tidak semua elemen dapat diambil nilai referencesnya melainkan harus kita register atau daftarkan terlebih dahulu. Contohnya misalkan kita memiliki form berikut ini
Form diatas merupakan multiple input yang dihandle dengan menggunakan controlled component. Kode dari form diatas yakni
constructor(props){
super(props);
// bind kedua handler agar dapat menggunakan this
this.onSubmit = this.onSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
this.state = {
// form value boject
name : '',
alamat : ''
}
}
handleChange(event){
this.setState({
[event.target.name] : event.target.value
});
}
onSubmit(event){
event.preventDefault();
console.log(this.state);
}
render() {
return (
<form onSubmit={this.onSubmit}>
<p>
<label> nama </label>
<input type="text" value={this.state.name} name="name" onChange={this.handleChange} />
</p>
<p>
<label> alamat </label>
<input type="text" value={this.state.alamat} name="alamat" onChange={this.handleChange} />
</p>
<p>
<input type="submit" value="submit" />
</p>
</form>
);
}
kita akan memanfaatkan ref untuk mereset input nama dan alamat setelah form tersebut disubmit oleh user.
Implementasi ref
Langkah 1 – mengimport modul ReactDOM
modul ReactDOM berasal dari package react-dom, pastikan pada kita mengimport modul tersebut pada class component.
import React , { Component } from 'react';
import ReactDOM from 'react-dom';
langkah 1 – registrasi elemen
hal pertama kali yang harus dilakukan adalah meregister elemen tersebut agar dapat ambil nilai referencesnya dari dom. Carannya yakni berikan attribute “ref” pada elemen-elemen tersebut dengan value berupa nama dari ref (string). Contohnya untuk kedua elemen diatas maka implementasinnya adalah sebagai berikut iin
<p>
<label> nama </label>
<input type="text" value={this.state.name} ref="refName" name="name" onChange={this.handleChange} />
</p>
<p>
<label> alamat </label>
<input type="text" value={this.state.alamat} ref="refAlamat" name="alamat" onChange={this.handleChange} />
</p>
langkah dua 2 – membuat fungsi untuk menreset value dari elemen
kita akan menaruhnya pada fungsi yang menghandle submit dari form tersebut.
onSubmit(event){
event.preventDefault();
console.log(this.state);
// clear input
ReactDOM.findDOMNode(this.refs.refAlamat).value = '';
ReactDOM.findDOMNode(this.refs.refName).value = '';
}
fungsi value = ”, digunakan untuk mereset nilai dari input. Meski sebenarnya kita dapat meresetnya melalui beberapa cara lain. Misalnya state pada komponen yang kita ubah nilainya. Namun sekali lagi ini tergantung dari situasi dan kondisi.
Fungsi yang dapat kita gunakan pada ref ini layaknya pada javascript references pada suatu elemen. Misalnya value, focus, id dan lain sebagainnya. Kita dapat memanfaatkan references untuk mengakomodasi fungsi-fungsi element references pada javascript.
testing
saat form di berikan nilai.
saat form disubmit
nilai dari input akan direset menjadi ” (bukan null) sesuai dengan kode yang kita tuliskan. Berikut ini terdapat beberapa fungsi references yang biasannya digunakan
| Fungsi element reference | Keguanaan |
| elementRef.value() | untuk memberikan value terhadap elemen tersebut. |
| elementRef.focus() | untuk memfokuskan cursor pada element , biasannya digunakan ke input. Berkorelasi dengan css input:focus. |
| elementRef.blur() | untuk menghilangkan fokus cursor pada element , biasannya digunakan ke input. Berkorelasi dengan css input:focus. |
| elementRef.getAttribute() | mendapatkan nilai dari attribute tertentu pada suatu element |
| elementRef.style() | memberikan nilai stylesheet(css) pada element (sangat berguna untuk theming aplikasi). |
berikut ini adalah kode full dari penggunaan multiple input dengan controlled component dan implementasi reactDOM (references)
import React , { Component } from 'react';
import ReactDOM from 'react-dom';
import './App.css';
class App extends Component {
// tutorial
constructor(props){
super(props);
// bind kedua handler agar dapat menggunakan this
this.onSubmit = this.onSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
this.state = {
// form value boject
name : '',
alamat : ''
}
}
handleChange(event){
this.setState({
[event.target.name] : event.target.value
});
}
onSubmit(event){
event.preventDefault();
console.log(this.state);
// clear input
ReactDOM.findDOMNode(this.refs.refAlamat).value = '';
ReactDOM.findDOMNode(this.refs.refName).value = '';
}
render() {
return (
<form onSubmit={this.onSubmit}>
<p>
<label> nama </label>
<input type="text" value={this.state.name} ref="refName" name="name" onChange={this.handleChange} />
</p>
<p>
<label> alamat </label>
<input type="text" value={this.state.alamat} ref="refAlamat" name="alamat" onChange={this.handleChange} />
</p>
<p>
<input type="submit" onClick={this.onButtonClick} value="submit" />
</p>
</form>
);
}
// end tutorial
}
export default App;