بخش های اصلی

آموزش ReactJS

ReactJS – Refs

ref برای بازگرداندن رفرنس (refrence) به عنصر، استفاده میشه. باید تا می توانیم از استفاده از Refها اجتناب کنیم ولی در مواقعی که نیاز به سنجش هایِ DOM داشته باشیم یا بخوایم متد ها را به کامپوننت ها اضافه کنیم، می توانیم از آن ها استفاه کنیم.

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

در مثالی که در ادامه آورده شده، نحوه ی استفاده از refها برای پاک کردن فیلد ورودی نشان داده شده. بعد از این که روی دکمه کلیک میشه، تابعِ clearInput بدنبال عنصری با مقدارِ ref = “myInput” می گرده، state را ریسِت (reset) میکنه و فوکوس را روی آن قرار میده.

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

react refs example

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش ReactJS

Learn ReactJS

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد