Verwenden Sie TypeScript React, um Klickereignisfunktionen zu entprellen

Question

Ich versuche, die Lodash-Debounce-Funktion in der Onclick-Funktion zu implementieren, um Mehrfachklicks auf die Schaltfläche zu vermeiden. Die Lösung, die ich gefunden habe, ist folgende:

function saveForm() {
//Führen Sie hier einige Operationen aus
}

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

Ich sehe viele Beispiele dafür, wie man eine Funktion außerhalb der Rückgabe entprellt und diese entprellte Funktion dann in onclick verwendet. Ist es falsch, die Entprellung (inline) direkt am Schaltflächenelement durchzuführen?

Answer 1

就良好的编码实践而言，你应该避免在JSX中放置过多的业务逻辑。只需将你的onClick处理程序提取到JSX之外即可。

其次，你不希望在防抖后返回saveForm。而是调用它。所以用saveForm替换() => saveForm。

function saveForm() {
//在这里执行操作
}

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

<Button onClick={debouncedClickHandler}>保存</Button>

你还可以使用useCallback钩子。如果需要，我把使用useCallback钩子的最佳实践留给你去探索。