问题
I have this code in my component;
I want to prevent multiple clicking because it avoids my preventing code to add the element with the same id, can anybody help me to write a function maybe kind of setTimeOut() or something like that to prevent the second click to pass after 1 second or half a second so multiple clicking can be prevented
state = {
redirect: false,
loading: false,
alreadyAddedFav: false,
}
onClickedHandler = (recipe_id, token) => {
if (!this.props.isAuthenticated) {
this.setState({ redirect: true })
}
else {
const favData = {
recipe_id: recipe_id,
userId: this.props.userId
}
if (this.props.favRecipes.length > 0) {
if (!this.props.favRecipes.some(item => item.recipe_id === recipe_id)) {
console.log("added in the loop!")
this.props.onFav(favData, token);
} else {
this.setState({ alreadyAddedFav: true })
console.log("it is already in the fav list!")
console.log(recipe_id)
}
} else {
this.props.onFav(favData, token);
}
}
}
render() {
return (
<SearchResult
key={ig.recipe_id}
title={ig.title}
imgSrc={ig.image_url}
clicked={() => this.onClickedHandler(ig.recipe_id, this.props.token)}
>
</SearchResult>)}
回答1:
make a instance variable lastClicked
then in clickHandler
if( new Date().getTime() - lastClicked < threshold ) {
return; // dont do anything
}
threshold in your case is 1 second
回答2:
Manage a Boolean property in your state and based on that boolean immediately return your function so, if it's true that will prevent user from multiple clicks.
state = {
redirect: false,
loading: false,
alreadyAddedFav: false,
isAlreadyClicked: false, // Initially false because user didn't clicked yet
}
onClickedHandler = (recipe_id, token) => {
/*
* If isAlreadyClicked is true immediatly return the function
* Which will prevent it's execution
*/
if (this.state.isAlreadyClicked) return;
// As user clicked and function execution starts so, make it true
this.setState({
isAlreadyClicked: true,
})
if (!this.props.isAuthenticated) {
this.setState({ redirect: true })
}
else {
const favData = {
recipe_id: recipe_id,
userId: this.props.userId
}
if (this.props.favRecipes.length > 0) {
if (!this.props.favRecipes.some(item => item.recipe_id === recipe_id)) {
console.log("added in the loop!")
this.props.onFav(favData, token);
// As now function did it's job return it back to the false
this.setState({
isAlreadyClicked: false,
})
} else {
this.setState({ alreadyAddedFav: true })
console.log("it is already in the fav list!")
console.log(recipe_id)
// As now function did it's job return it back to the false
this.setState({
isAlreadyClicked: false,
})
}
} else {
// As now function did it's job return it back to the false
this.setState({
isAlreadyClicked: false,
})
this.props.onFav(favData, token);
}
}
}
render() {
return (
<SearchResult
key={ig.recipe_id}
title={ig.title}
imgSrc={ig.image_url}
clicked={() => this.onClickedHandler(ig.recipe_id,
this.props.token)}
>
</SearchResult>
)
}
来源：https://stackoverflow.com/questions/52653004/how-to-prevent-multiple-clicks-in-reactjs