I have the following class snippet:
constructor(props) {
super(props);
this.timeout = null;
}
search = (e) => {
clearTimeout(this.timeout);
this.timeout = setTimeout(
function(){ console.log(e.target); },
500
);
}
<input
type="text"
placeholder="Search by title or author"
onKeyPress={this.search} />
I can't get the set timeout to print the value from the event, is there something that i should be doing but i'm not?
As per DOC:
The SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked. This is for performance reasons.
Example:
function onClick(event) {
console.log(event.type); // => "click"
const eventType = event.type; // => "click"
setTimeout(function() {
console.log(event.type); // => null
console.log(eventType); // => "click"
}, 0);
}
How to access the values inside callback?
Storing value in a variable:
If you want to access the value in timeout callback function then store the value in a variable and use that variable instead of directly using the event object.
function onClick(event) {
console.log(event.type); // => "click"
const { type } = event;
setTimeout(function() {
console.log(type); // => click
}, 0);
}
Using event.persist():
If you want to access the event properties in an asynchronous way, you should call event.persist() on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.
function onClick(event) {
event.persist();
console.log(event.type); // => "click"
setTimeout(function() {
console.log(event.type); // => click
}, 0);
}
Try this:
search = (e) => {
e.persist();
clearTimeout(this.timeout);
this.timeout = setTimeout(
function(){ console.log(e); alert(e) },
500
);
}
Judging from your code I think that you are using babel-plugin-transform-class-properties. In that case you don't need a constructor part.
Note: As of v17, e.persist() doesn’t do anything because the SyntheticEvent is no longer pooled.
After React v17, SyntheticEvent has no longer nullified the event.
It's hard to say without seeing your onKeypress method, but it might be a binding issue. Try binding your search in the constructor.
constructor (props) {
super(props);
this.timeout = null;
this.search = this.search.bind(this);
}
Are you going to make the timeout as state?
My suggestion would be like this
constructor(props) {
super(props);
this.state = {
timeout: null
}
}
search = (e) => {
clearTimeout(this.state.timeout);
const timeout = setTimeout(
function(){ console.log(e.target); },
500
);
this.setState({timeout: timeout})
}
