آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

Ref ها مربوط به ReactJS

دوره های مرتبط با این مقاله

Refها مربوط به ReactJS

Ref ها در برگشت دادن مرجعی به عنصر کاربرد دارند. در اغلب مواقع بهتر است از ref ها پرهیز کرد، اما اگر به اندازه گیری DOM و یا به افزودن متدها به اجزا نیاز داریم، ref ها می توانند به ما کمک کنند.


استفاده از Refها در ReactJS

در مثال زیر چگونگی استفاده از refها جهت پاک کردن کادر ورودی نشان داده شده است. تابع ClearInput به کمک مقدار 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'));

بعد از فشرده شدن دکمه ورودی پاک شده و تمرکز بر روی آن قرار می گیرد.


Refها مربوط به ReactJS

برای مطالعه سرفصل دوره آموزش عملی و کاربردی ReactJS کلیک نمایید .


  • 188
  •    164
  • تاریخ ارسال :   1397/10/19

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .