регулировать обработчик события реакции в немом компоненте - PullRequest
Новая
       0

регулировать обработчик события реакции в немом компоненте

0 голосов
/ 07 декабря 2018

Я пытаюсь буферизовать вводимые пользователем данные, и как только пользователь не нажимает ни одной клавиши в течение 1 секунды, я намерен выполнить sendRequest().Но это не работает.Вместо этого он вызывает sendRequest() каждый раз, когда пользователь нажимает любую клавишу.

Я ценю любые комментарии / возможные исправления. 

import React from 'react';
import throttle from 'lodash/throttle';

const ELAPSED_TIME = 1000;    

const App = ({ setInputTerm, ...props }) => {
  const onHandleQueryChange = (e) => {
    setInputTerm(e.target.value);
    throttledSendRequest();  
  };

  function sendRequest() {
    console.log('hey you');
  }

  const throttledSendRequest = throttle(sendRequest, ELAPSED_TIME);

  return (
    <div>
      <input onChange={onHandleQueryChange} type="text"></input>
    </div>  
  );
}

export default App;

1 Ответ

0 голосов
/ 07 декабря 2018

Вы хотите debounce :

Создает функцию debounce, которая задерживает вызов func до истечения миллисекунд ожидания с момента последнего вызова функции debounce.Функция debounce поставляется с методом cancel для отмены отложенных вызовов func и методом flush для немедленного их вызова.Предоставьте параметры, чтобы указать, следует ли вызывать func на переднем и / или заднем фронте тайм-аута ожидания.Функция вызывается с последними аргументами, предоставленными для функции debounce.Последующие вызовы дебазированной функции возвращают результат последнего вызова func. 

import React from 'react';
import debounce from 'lodash/debounce';

const ELAPSED_TIME = 1000;    

const App = ({ setInputTerm, ...props }) => {
  const onHandleQueryChange = (e) => {
    setInputTerm(e.target.value);
    throttledSendRequest();  
  };

  function sendRequest() {
    console.log('hey you');
  }

  const throttledSendRequest = debounce(sendRequest, ELAPSED_TIME);

  return (
    <div>
      <input onChange={onHandleQueryChange} type="text"></input>
    </div>  
  );
}

export default App;
...