Refs در ReactJS – آموزش ReactJS

Refs در ReactJS

در ReactJS برای ارجاع به یک عنصر از ref استفاده می شود. در اغلب موارد نباید از ref استفاده کرد اما زمانی که بخواهیم متدها را به کامپوننت اضافه کنیم، مفید است.

استفاده از Refs

مثال زیر نحوه استفاده از refs برای پاک کردن مقدار فیلد ورودی را نشان می دهد. تابع ClearInput ابتدا مقدار state را خالی می کند و سپس در بین عناصر DOM به دنبال عنصری با مقدار ref = “myInput”  میگردد و در صورت پیدا شدن، بر روی آن فوکوس می کند.

محتوای فایل 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'));

زمانی که بر روی دکمه کلیک شود، ابتدا مقدار input را پاک می کند و سپس بر روی آن فوکوس می کند.

نوشته Refs در ReactJS – آموزش ReactJS اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.