تنفيذ debounce في react

Rayden Storm · 21 مارس 2021

لدي input يستخدم للبحث وكلما تتغير قيمة ال input أغير ال state الذي يتحكم فيها وبالتالي أعيد الاتصال بال endpoint الخاصة بالبحث وأجلب النتيجة لكن لا أريد أن يكون الأمر في كل تغيير لقيمة ال input لذا أريد تطبيق debounce على الدالة التي تعطى الى onChange

import React from 'react';

export default function Search() {
  const [state, setState] = useState({ text: '', results: null });

  const handleChange = (e) => {
      //هنا اريد تنفيذ مبدأ 
      //debounce
  }

  return (
    <div>
      <Input type="text" value={state.text} onChange={handleChange}></Input>
    </div>
  );
}

Yomna Raouf · 21 مارس 2021

يوجد أكثر من طريقة للقيام بذلك، إحداها هو إنشاء الدالة التالية و التي تأخذ الدالة و الوقت كمعاملات لها:

const debounce = (func, wait) => {
  let timeout;
  return function(...args) {
    const context = this;
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(() => {
      timeout = null;
      func.apply(context, args);
    }, wait);
  };
};

"يمكنك أن تقوم بإنشاء مكون خاص لها، إذا كنت تنوي استخدامها في أكثر من مكون"

بعدها يمكنك استخدامها كما يلي:

const onChange = debounce(e => search(event.target.value), 1000);

و بالتالي ستحتاج لإنشاء الدالة search و التي تتصل مع ال endpoint للبحث عنوالنتيجة و جلبها

Mohammed Saber6 · 21 مارس 2021

مرحباً بك:
يمكنك استخدام هذه المكتبة react-debounce-input فهي تفعل بالتحديد ما تريد

import React from 'react';
import ReactDOM from 'react-dom';
import {DebounceInput} from 'react-debounce-input';
 
class App extends React.Component {
  state = {
    value: ''
  };
 
  render() {
    return (
      <div>
        <DebounceInput
          minLength={2}
          debounceTimeout={300}
          onChange={event => this.setState({value: event.target.value})} />
 
        <p>Value: {this.state.value}</p>
      </div>
    );
  }
}

تنفيذ debounce في react

السؤال

Rayden Storm

رابط هذا التعليق

شارك على الشبكات الإجتماعية

2 أجوبة على هذا السؤال

Recommended Posts

Yomna Raouf

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mohammed Saber6

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية