0

I want to use lodash within class property but it always return me null for the value. I followed this Perform debounce in React.js (second answer and solution number 3)

my code:

// func
handleSearchInput = debounce(e => {
    console.log(e);
    e.persist();

    console.log(e.target);
}, 500);

// Render
<Input
    type="text"
    onKeyDown={this.handleSearchInput}
    placeholder="Search..."
/>

all my console.log() always return me null. I want to get my input value.

Any solution?

ssuhat
  • 7,387
  • 18
  • 61
  • 116

3 Answers3

2

Yo have to persist (or cancel synthetic event re-usage) before calling debounce 

onKeyDown={e => {
  e.persist();
  this.handleSearchInput(e);
}}
Vlad
  • 439
  • 2
  • 7
0

You are intending to use a lodash function. You need to import or require lodash first and use the function like this:

_.debounce(...)

The example you referenced uses a custom function called debounce.

Scriptonomy
  • 3,975
  • 1
  • 15
  • 23
  • I've solved it. Fyi I only import function that I use. `import debounce from lodash/debounce` – ssuhat Oct 28 '17 at 04:56
  • How did you install Lodash? I installed it via npm and I can not do like you wrote `import debounce from lodash/debounce` because it says to me 'cannot find module lodash/debounce` – Mariusz Jan 02 '20 at 11:43
0

You can persist the synthetic event by using:

onClick(event) {
  event.persist();

   setTimeout(() => {
     consoloe.log(event);
   }, 1000);
}

OR you can copy the event object:

onClick(event) {
 const eventClone = { ...event };

 setTimeout(() => {
     consoloe.log(eventClone);
 }, 1000);
}
Savan Chhayani
  • 1