تخفیف ویژه

همه چیز درباره کاربرد و نحوه استفاده از ref در react

دسته بندی: آموزش
زمان مطالعه: 10 دقیقه
۱۶ آبان ۱۳۹۷

همه چیز درباره کاربرد و نحوه استفاده از ref در react

در این مطلب میخوام شما رو با کاربرد و نحوه استفاده از ref در React آشنا کنم و با استفاده از اون به راحتی به المنتهای DOM دسترسی پیدا کرده و کار مورد نظرمون رو انجام بدیم.

به احتمال زیاد تا حالا براتون پیش اومده که بخواید در یک برنامه React به المنتهای DOM دسترسی مستقیم داشته باشید. اگر بخوام با یک مثال کاربرد ref رو نشون بدم، میشه اینطور فرض کرد که بخوایم مقدار یک المنت input رو بدون اینکه از props و re-render کردن استفاده کنیم، تغییر بدیم.

در ادامه نحوه استفاده از ref در react و مثالهای کاربردی از اون رو در اختیارتون قرار میدم تا بهتر و بیشتر با اون آشنا بشید.

نحوه ساختن ref

در نسخه React 16.3 یک API جدید بنام createRef() برای ساختن ref معرفی شد. شما میتونین در constructor با استفاده از createRef یک ref رو به وجود آورده و با استفاده از ویژگی ref، المنت مورد نظر رو به اون attach یا متصل کنید.

مثال زیر رو ببینید:

class Example extends React.Component {
  constructor(props) {
    super(props)

    // Create the ref
    this.exampleRef = React.createRef()
  }

  render() {
    return (
      <div>
        {/* Call the ref with the `ref` attribute */}
        <input type="text" ref={this.exampleRef} />
      </div>
    )
  }
}

همونطور که میبینید یک ویژگی بنام exampleRef به وجود آوردیم و اون رو به عنوان مقدار ref المنت input قرار دادیم. پس در نتیجه با استفاده از exampleRef میتونیم به المنت input در DOM دسترسی داشته باشیم و کارهای مورد نظرمون رو انجام بدیم.

اگر بخوایم به node مربوط به این المنت دسترسی داشته باشیم از this.exampleRef.current استفاده میکنیم. مثال زیر رو ببینید:

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

class App extends React.Component {
  constructor(props) {
    super(props);

    this.textInput = React.createRef();
    this.state = {
      value: '',
    }
  }

  handleSubmit = e => {
    e.preventDefault();
    this.setState({
      value: this.textInput.current.value,
    });
  };

  render() {
    return (
      <div>
        <h1>React Ref - createRef</h1>
        <h3>Value: {this.state.value}</h3>
        <form onSubmit={this.handleSubmit}>
          <input type="text" ref={this.textInput} />
          <button>Submit</button>
        </form>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

export default App;

همونطور که میبینید یک ref بنام textInput ساختیم و اون رو در ویژگی ref المنت input قرار دادیم. زمانی که فرم مورد نظر submit میشه، رویداد onsubmit فراخوانی میشه و در نتیجه متد handleSubmit اجرا میشه. در متد handleSubmit مقدار فعلی input با استفاده از this.textInput.current.value گرفته میشه و برای ویژگی value در state قرار میگیره.

پس زمانی که متنی رو در input وارد میکنید و submit رو کلیک میکنید، مقدار وارد شده در input به شما در تگ h3 نشون داده میشه. میتونین خروجی کد بالا رو ببینید: حالا میخوایم روشهای دیگه ساخت ref رو بررسی کنیم.

پاس دادن یک تابع callback به ref

React به شما اجازه میده که با پاس دادن یک callback به ویژگی ref بتونین ref مورد نظر خودتون رو به وجود بیارید. طرز استفاده از اون بصورت زیر هست:

<input type="text" ref={element => this.textInput = element} />

کاربرد ref در اینجا اینه که یک reference به المنت مورد نظر رو در this.textInput نگه داره تا بتونیم از اون استفاده کنیم. اگر بخوایم به مقدار این المنت هم با استفاده از ref دسترسی داشته باشیم بصورت this.textInput.value عمل میکنیم. اگر بخوایم مثال قبل رو با استفاده از این روش دوباره به وجود بیاریم، بصورت زیر خواهد بود:

class App extends React.Component {
    state = {
    value: ''
  }
  handleSubmit = e => {
    e.preventDefault();
    this.setState({ value: this.textInput.value})
  };

  render() {
    return (
      <div>
        <h1>React Ref - Callback Ref</h1>
        <h3>Value: {this.state.value}</h3>
        <form onSubmit={this.handleSubmit}>
          <input type="text" ref={e => this.textInput = e} />
          <button>Submit</button>
        </form>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

این امکان همچنین وجود داره که با استفاده از callback بتونیم ref رو از کامپوننت پدر به فرزند پاس بدیم. مثال زیر رو ببینید:

const Input = props => {
  return (
    <div>
      <input type="text" ref={props.inputRef} />
    </div>
  );
};

class App extends React.Component {
  state = {
    value: ""
  };

  handleSubmit = event => {
    this.setState({ value: this.inputElement.value });
  };

  render() {
    return (
      <div>
        <h1>React Ref - Callback Ref</h1>
        <h3>Value: {this.state.value}</h3>
        <Input inputRef={el => (this.inputElement = el)} />
        <button onClick={this.handleSubmit}>Submit</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

به همین راحتی.

قرار دادن رشته برای ویژگی ref

این روش یک روش قدیمی هست و بخاطر مشکلاتی که داره در آینده به احتمال زیاد حذف میشه. بخاطر این دلیل این نمونه ref آموزش داده میشه چون امکان داره اون رو در جایی ببینید و بهتره که در مورد اون اطلاعاتی داشته باشید.

اگر بخوایم مثالهای بالا رو با استفاده از این روش بنویسیم، بصورت زیر خواهد بود:

class App extends React.Component {
    state = {
    value: ''
  }
  
  handleSubmit = e => {
    e.preventDefault();
    this.setState({ value: this.refs.textInput.value})
  };

  render() {
    return (
      <div>
        <h1>React Ref - String Ref</h1>
        <h3>Value: {this.state.value}</h3>
        <form onSubmit={this.handleSubmit}>
          <input type="text" ref="textInput" />
          <button>Submit</button>
        </form>
      </div>
    );
  }
}

همونطور که میبینید رشته textInput برای ویژگی ref المنت input قرار داده شده و در متد handleSubmit هم با استفاده از this.refs.textInput.value به مقدار اون دسترسی پیدا کردیم و اون رو به کاربر نمایش دادیم.

خب روشهای مختلف ساخت ref رو دیدیم. حالا یک مثال کاربردی برای استفاده از اون میزنیم.

استفاده از ref برای form validation

با استفاده از ref میتونین به راحتی form validation سمت کلاینت رو مدیریت کنیم و اجازه submit کردن رو فقط تحت شرایط خاصی در اختیار کاربر قرار بدیم.

مثال زیر رو ببینید:

class App extends React.Component {
  constructor(props) {
    super(props);

    this.username = React.createRef();
    this.password = React.createRef();
    this.state = {
      errors: []
    };
  }

  handleSubmit = (event) => {
    event.preventDefault();
    const username = this.username.current.value;
    const password = this.password.current.value;
    const errors = this.handleValidation(username, password);

    if (errors.length > 0) {
      this.setState({ errors });
      return;
    }
    // Submit data
  };

  handleValidation = (username, password) => {
    const errors = [];
    // Require username to have a value on submit
    if (username.length === 0) {
      errors.push("Username cannot be empty");
    }
    
    // Require at least six characters for the password
    if (password.length < 6) {
      errors.push("Password should be at least 6 characters long");
    }
    
    // If those conditions are met, then return error messaging
    return errors;
  };

  render() {
    const { errors } = this.state;
    return (
      <div>
        <h1>React Ref Example</h1>
        <form onSubmit={this.handleSubmit}>
          // If requirements are not met, then display errors
          {errors.map(error => <p key={error}>{error}</p>)}
          <div>
            <label>Username:</label>
            // Input for username containing the ref
            <input type="text" ref={this.username} />
          </div>
          <div>
            <label>Password:</label>
            // Input for password containing the ref
            <input type="text" ref={this.password} />
          </div>
          <div>
            <button>Submit</button>
          </div>
        </form>
      </div>
    );
  }
}

همونطور که دیدید با استفاده از createRef دو ref به نامهای username و password به وجود آوردیم و اونا رو به المنتهای input نسبت دادیم. در متد handleSubmit با استفاده از this.username.current.value و this.username.current.value به مقادیر اونا دسترسی پیدا کردیم و این مقادیر رو به متد handleValidation ارسال کردیم و در اونجا شرایطی رو بررسی کردیم و در صورت عدم وجود شرایط، ارورهای متناسبی رو به کاربر نمایش میدیم.

میتونین خروجی کد بالا رو ببینید: اگر username خالی باشه یا password کمتر از 6 حرف باشه، فرم submit نمیشه و متن ارور هم بهتون نمایش داده میشه. شما میتونین این شرایط رو سختتر کنید و form validation حرفه‌ای‌تری رو به وجود بیارید.

در این لینک میتونین بقیه مطالب مرتبط با React رو در سون لرن مشاهده کنید.

نتیجه گیری

در این مطلب با کاربرد و نحوه استفاده از ref در react آشنا شدیم و مثالهایی در مورد اون با هم بررسی کردیم و دیدیم که با استفاده از ref میتونیم به المنت مورد نظر در DOM دسترسی پیدا کنیم.

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

saba

ممنون از اموزش عالیتون

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :