Gunakan TypeScript React untuk menyahpantun fungsi acara klik

Question

Saya cuba melaksanakan fungsi nyahpantul lodash pada fungsi onclick untuk mengelakkan berbilang klik pada butang. Penyelesaian yang saya buat ialah ini:

function saveForm() {
//Lakukan beberapa operasi di sini
}

 saveForm, 1500, {
              maxWait: 2000 })}>
              jimat

Saya melihat banyak contoh melakukan nyahlantun pada fungsi di luar pulangan, dan kemudian menggunakan fungsi nyahlantun itu dalam onclick. Adakah salah untuk melakukan debounce (sebaris) terus pada elemen butang? 

Answer 1

Dari segi amalan pengekodan yang baik, anda harus mengelak daripada meletakkan terlalu banyak logik perniagaan dalam JSX. Hanya ekstrak pengendali onClick anda di luar JSX.

Kedua, anda tidak mahu kembali saveForm。而是调用它。所以用saveForm替换() => saveForm selepas anti goncang.

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

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

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

Anda juga boleh menggunakan useCallback钩子。如果需要，我把使用useCallbackAmalan terbaik untuk mata kail tinggal untuk anda terokai.