今天做react项目中，给一个 input onKeyDown 事件做节流，出现了节流效果失效。
问题代码：
|
1
2
3
4
5
6
7
|
render() { return ( <div className="search-bar"> <input className="search-input" type="text" placeholder="请输入要搜索的用户名(英文)" onKeyDown={this.throttle(this.handleKeyDown)}/> </div> ) } |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
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 // 发送搜索 this.props.search(value) } |
此处问题出现在：
handleKeyDown() 方法里的 this.props.search(value)
刷新了组件 props，触发了 react 更新流生命周期。 重新执行了 render()；
这样 throttle() 方法就会重新执行;
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
throttle = (fn) => { console.log('%c throttle初始化', '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); } } |
在代码中加入打印，就会在控制台看到 throttle初始化 打印多条;
解决方式1：
把节流初始化的位置放到 事件函数赋值
|
1
2
3
4
5
6
7
|
render() { return ( <div className="search-bar"> <input className="search-input" type="text" placeholder="请输入要搜索的用户名(英文)" onKeyDown={this.handleKeyDown}/> </div> ) } |
|
1
2
3
4
5
6
7
8
9
10
11
|
handleKeyDown = this.throttle((e) => { let { value } = e.target const keyCode = e.keyCode if (keyCode !== 13) return if (!value.trim()) return // 发送搜索 this.props.search(value) }) |
解决方式2： 在构造函数中赋值初始化
|
1
2
3
4
5
6
7
|
render() { return ( <div className="search-bar"> <input className="search-input" type="text" placeholder="请输入要搜索的用户名(英文)" onKeyDown={this.handleKeyDown}/> </div> ) } |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
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 // 发送搜索 this.props.search(value) } |
采坑总结：
要更加深了解 react 生命周期的触发机制
以上就是React事件节流效果失效的原因及解决的详细内容，更多关于React事件节流效果失效的资料请关注服务器之家其它相关文章！
原文链接：https://www.cnblogs.com/cleves/p/14663672.html
