如何在使用 lodash 反应中对事件处理程序进行反抖?

Question

import { debounce } from 'lodash';
// constructor
this.inputChangeHandler2 = debounce(this.inputChangeHandler, 100);
// html
<textarea onChange={this.inputChangeHandler2} />

当我尝试使用 lodash 去抖动功能时，这里什么也没发生。我在inputChangeHandler中放置了一个断点，如果从未命中。

Answer 1

不确定您遇到了什么问题。

但是在下面，我敲出了一个使用 lodash 去抖动的片段。 也许将其与您的进行比较，看看有什么不同。

class Test extends React.Component {
constructor () {
super();
this.state = {lasttime: "?"}
}
changed () {
this.setState({lasttime: new Date().getTime()});
}
render () {
return (
<React.Fragment>
<textarea onChange={_.debounce(this.changed.bind(this), 100)}/>
<div>{this.state.lasttime}</div>
</React.Fragment>
);
}
}
ReactDOM.render(<React.Fragment>
<Test/>
</React.Fragment>, document.querySelector('#mount'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="mount"></div>

Answer 2

因为 React 使用合成事件，所以你不能在去抖动函数中提取值(事件不再存在(。您需要一个标准事件处理程序(代码中的onChange(来获取该值，以及一个去抖动函数(setValue(来设置它：

class Demo extends React.Component {
state = { text: '' };

setValue = _.debounce(text => this.setState({ text }), 300);

onChange = e => this.setValue(e.target.value);

render () {
const { text } = this.state;

return (
<div>
<input onChange={this.onChange} defaultValue={text} />
<div>{text}</div>
</div>
);
}
}
ReactDOM.render(
<Demo />,
root
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Answer 3

你可以试试 e.persist(( (如果你想以异步方式访问事件属性(

class Abc extends React.Component {
inputChangeHandler2 = (e)=> {
//e(event will be available here)
//your code
}
hChange = e => {
e.persist();
_.debounce(() => this.inputChangeHandler2(e), 300);
}
render () {
return (
<div>
<input onChange={this.hChange.bind(this)} />
</div>
);
}
}