Reactjs 如何使用带有 onChange 函数 REACT 的 useCallback 钩子

import styled from "styled-components"
import React, { useState, useCallback } from "react"
import { useGetFilteredBooks } from "../../hooks/useGetFilteredBooks"
import { useRecoilState } from "recoil"
import { Books, PageNumber, SearchText } from "../../recoil/globalState"



export const SearchBook = () => {
    const [text, setText] = useRecoilState(SearchText)
    const [pageNumber, setPageNumber] = useRecoilState(PageNumber)
    const [setBooks] = useRecoilState(Books);
    const { refetch } = useGetFilteredBooks(text, setBooks, setPageNumber);

    const handleOnChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
        setText(event.target.value)
    },[])  // No deps needed here according to ESLint, since react setState<s> do not change during re-renders.

    const handleOnSubmit = useCallback((e: any) => {
        e.preventDefault();
        refetch();
    },[refetch]) // refetch is needed here, since it might change during re-renders, you should make sure to memoize that function as well


    return (
        <>
            <form onSubmit={handleOnSubmit}>
                <Input value={text} onChange={handleOnChange} placeholder="Enter the name of the book or author" />
                <button type="submit">Show</button>
            </form>
        </>
    )
}

const Input = styled.input`
    padding: 10px 10px;
    width: 300px;
`