خانه / برنامه نویسی / Refs در ReactJS – آموزش ReactJS

Refs در ReactJS – آموزش ReactJS

reactjs refs 6153 تصویر

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 را پاک می کند و سپس بر روی آن فوکوس می کند.

reactjs refs 6153 1 تصویر

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


لينک منبع

درباره ی admin

همچنین ببینید

توسعه اپلیکیشن های واقعی با اسکالا (Scala)

اسکالا (Scala) یک زبان برنامه ‌نویسی کاربردی شی گرا و تابعی بوده و در زمینه …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *