Today, when I was working on a react project, I throttled an input onKeyDown event, but the throttling effect failed. Problem code: render() { return ( <div className="search-bar"> <input className="search-input" type="text" placeholder="Please enter the user name to search (English)" onKeyDown={this.throttle(this.handleKeyDown)}/> </div> ) } throttle = (fn) => { let valid = true const context = this return function() { if (!valid) return valid = false const args = arguments fn.apply(context, args) setTimeout(() => { valid = true }, 1000); } } handleKeyDown = (e) => { let { value } = e.target const keyCode = e.keyCode if (keyCode !== 13) return if (!value.trim()) return // Send search this.props.search(value) } The problem here is: this.props.search(value) in handleKeyDown() method In this way, the throttle() method will be re-executed; throttle = (fn) => { console.log('%c throttle initialization', 'color: red'); let valid = true const context = this return function() { if (!valid) return valid = false const args = arguments fn.apply(context, args) setTimeout(() => { valid = true }, 1000); } } If you add printing to the code, you will see throttle initialization print multiple lines in the console; Solution 1:Put the throttling initialization position into the event function assignment render() { return ( <div className="search-bar"> <input className="search-input" type="text" placeholder="Please enter the user name to search (English)" onKeyDown={this.handleKeyDown}/> </div> ) } handleKeyDown = this.throttle((e) => { let { value } = e.target const keyCode = e.keyCode if (keyCode !== 13) return if (!value.trim()) return // Send search this.props.search(value) }) Solution 2: Assign initialization in the constructorrender() { return ( <div className="search-bar"> <input className="search-input" type="text" placeholder="Please enter the user name to search (English)" onKeyDown={this.handleKeyDown}/> </div> ) } constructor(props) { super(props) this.handleKeyDown = this.throttle(this.handleSearch) } handleSearch = (e) => { let { value } = e.target const keyCode = e.keyCode if (keyCode !== 13) return if (!value.trim()) return // Send search this.props.search(value) } Summary of mining pits:To better understand the triggering mechanism of the react life cycle The above is the detailed content of the reasons and solutions for the failure of React event throttling effect. For more information about the failure of React event throttling effect, please pay attention to other related articles on 123WORDPRESS.COM! You may also be interested in:
|
<<: Examples of optimization techniques for slow query efficiency in MySQL IN statements
>>: Explanation of Linux kernel optimization configuration for high-concurrency nginx server
This morning I planned to use Wampserver to build...
sudo configuration file The default configuration...
1. Basic Use It can be instantiated through the M...
This is a collection of commonly used but easily ...
Table of contents Technology Stack Backend build ...
Table of contents 1. Download the system image fi...
This article is based on the CentOS 7.3 system en...
Operating system: Win7 64-bit Ultimate Edition My...
1. Shut down MySQL [root@localhost /]# service my...
1. Navigation: Unordered List vs. Other Label Ele...
1. Basic Concepts //Any container can be specifie...
Readonly and Disabled both prevent users from chan...
Table of contents Preface Single file components ...
Table of contents Two ways to solve the problem o...
This article shares the specific code of jquery+A...