ReactJS - Referensi

Itu ref digunakan untuk mengembalikan referensi ke elemen. Refs harus dihindari dalam banyak kasus, namun, ini dapat berguna saat kita membutuhkan pengukuran DOM atau untuk menambahkan metode ke komponen.

Menggunakan Referensi

Contoh berikut menunjukkan bagaimana menggunakan ref untuk mengosongkan kolom input. ClearInput fungsi mencari elemen dengan ref = "myInput" nilai, menyetel ulang status, dan menambahkan fokus ke sana setelah tombol diklik.

App.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
   constructor(props) {
      super(props);
		
      this.state = {
         data: ''
      }
      this.updateState = this.updateState.bind(this);
      this.clearInput = this.clearInput.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   clearInput() {
      this.setState({data: ''});
      ReactDOM.findDOMNode(this.refs.myInput).focus();
   }
   render() {
      return (
         <div>
            <input value = {this.state.data} onChange = {this.updateState} 
               ref = "myInput"></input>
            <button onClick = {this.clearInput}>CLEAR</button>
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Setelah tombol diklik, file input akan dibersihkan dan difokuskan.