javascript 使用typescript react对onclick函数进行反跳

j9per5c4 于 2023-02-02 发布在 Java

关注(0)|答案(5)|浏览(173)

我尝试在onclick函数上实现lodash去反跳功能，以避免多次点击按钮，我想到的解决方案如下：

function saveForm() {
//do stuff here
}

<Button onClick={debounce(() => saveForm, 1500, {
              maxWait: 2000 })}>
              SAVE
</Button>

我看到过很多例子，在return之外的函数上执行去反跳，然后在onclick下使用那个去反跳的函数。直接（内联）在button元素上执行去反跳是错误的做法吗？

JavaScript

来源：https://stackoverflow.com/questions/75320389/debounce-on-a-onclick-function-using-typescript-react

5条答案

按热度按时间

jgzswidk1#

如果你的组件经常被重新渲染，我认为它可以被替换为useCallback，但是在正常情况下，我认为你的用例看起来还不错。

赞(0）回复(0）举报 2023-02-02

ppcbkaq52#

相反，您可以添加一个加载状态，并根据该加载状态禁用按钮。

赞(0）回复(0）举报 2023-02-02

rhfm7lfc3#

实际上，我们将在表单内部进行验证，并在组件外部保存表单。这将给出明确有效的输入数据，并盲目保存。

赞(0）回复(0）举报 2023-02-02

js81xvg64#

是的，@abdemirza正确-从用户体验的Angular 来看更好的解决方案-它是添加加载状态和禁用按钮，当你异步函数做一些事情。
使用去抖不是错误，但最好使用加载状态

赞(0）回复(0）举报 2023-02-02

oxosxuxt5#

就良好的编码实践而言，您应该避免在JSX中放入太多的业务逻辑，只需将onClick处理程序提取到JSX之外即可。
第二，你不想在去抖后返回saveForm，而是调用它。所以用saveForm替换() => saveForm。

function saveForm() {
//do stuff here
}

const debouncedClickHandler = debounce(saveForm, 1500, {maxWait: 2000})

<Button onClick={debouncedClickHandler}>SAVE</Button>

您也可以使用useCallback钩子，如果需要的话，我让您自己探索使用useCallback钩子的最佳实践。

赞(0）回复(0）举报 2023-02-02

我来回答

javascript 使用typescript react对onclick函数进行反跳

5条答案

相关问题

热门标签

最新问答