CODEWITHSUNDEEP
javascriptreactjslodash
ssuhat
ssuhat

Reputation: 7656

React lodash debounce always return null

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?

Upvotes: 1

Views: 1524

Answers (3)

Savan Chhayani
Savan Chhayani

Reputation: 11

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);
}

Upvotes: 1

Vlad
Vlad

Reputation: 479

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

onKeyDown={e => {
  e.persist();
  this.handleSearchInput(e);
}}

Upvotes: 3

Scriptonomy
Scriptonomy

Reputation: 4055

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.

Upvotes: 1

Related Questions