Отказаться от изменения

У меня есть текстовое поле Material UI, содержащее onChange. Этот onChange берет event и выполняет функцию handleOnChange. В текущей реализации функция handleOnChange выполняется каждый раз при изменении event.

Можно ли использовать debounce для выполнения функции только через 2000 мс непосредственно на event?

Мое текстовое поле

<TextField
  onChange={
    event =>
      handleOnChange(
      event.target.value,
      firstValue,
      secondValue,                            
    )
/>

Моя функция

const handleOnChange = (value, firstValue, secondValue) => {
  ...do something..
}

Я пробовал следующее, но handleOnChange по-прежнему срабатывает при каждом изменении event, а не через 2000 мс.

<TextField
  onChange={
    event =>
      _.debounce(handleOnChange(
      event.target.value,
      firstValue,
      secondValue,                            
    ), 2000)
/>

reactjs javascript onchange debounce
person Magofoco    schedule 23.07.2020    source источник
comment
Вы можете сохранить аргументы handleOnChange в хуке с одним состоянием и отменить изменение состояния, а затем всякий раз, когда изменяется состояние отмены, запускать useEffect, который вызывает handleOnChange со значением состояния debounces.   -  person JMadelaine    schedule 23.07.2020
comment
Спасибо! Не могли бы вы привести пример кода?   -  person Magofoco    schedule 23.07.2020

Ответы (2)


arrow_upward
1
arrow_downward

Вы создаете отклоненный экземпляр при каждом вызове события. Попробуйте создать один экземпляр функции debounce и использовать его в своем обработчике. Что-то вроде этого:

const handleOnChange = _.debounce(change => {
  console.log(change);
}, 1000);

export default function App() {
  return (
    <div className="App">
      <input onChange={event => handleOnChange(event.target.value)} />
    </div>
  );
}
person tjankowski    schedule 23.07.2020

arrow_upward
0
arrow_downward

Проблема в том, что вы передаете результат функции handleOnChange() для устранения дребезга, а не ссылку на функцию.

Попробуйте еще что-нибудь вроде этого:

<TextField
  onChange={
    event =>
      _.debounce(() => handleOnChange(
          event.target.value,
          firstValue,
          secondValue,                            
        ), 2000)
/>
person N. Brittain    schedule 23.07.2020
comment
Я попробовал ваше предложение, но мой handleOnChange вообще не срабатывает - person Magofoco; 23.07.2020
comment
Извините, мне нужно еще немного подумать о структуре этого вызова... возможно, он должен быть больше похож на onChange=_.debounce(event => handleOnChange(...), 2000). Если это не сработает, я предлагаю опубликовать более полный пример. - person N. Brittain; 23.07.2020