将 lodash throttle 与 React 文本输入和 Typescript 结合使用

Question

即使在阅读了大量文档之后，我也在努力使这个文本输入限制在反应中起作用。

import { throttle } from 'lodash';
...
      <input
        type="text"
        onChange={(e): void => throttle(handleTextInput, 1000)(e)}
      />

我显然做错了什么，感谢任何帮助！

Answer 1

您的代码示例中的 e 在语法上是错误的。将您的代码更改为上面的代码并告诉我它是否成功。

<input type="text"
       onChange={() => throttle(handleTextInput, 1000)}
/>

Answer 2

现在您在为输入定义 onChange 时调用 throttle 函数。您必须为 throttle 提供一个函数，该函数需要在等待后调用。试试这个 -

throttledInput = throttle(input => this.handleTextInput(input), 1000);
...
<input
   type="text"
   onChange={(e) => this.throttledInput(e.target.value);}
 />

将 lodash throttle 与 React 文本输入和 Typescript 结合使用

Using lodash throttle with React text input and Typescript

reactjs

typescript

lodash

throttling