React如何将点击触发的搜索改为实时输入搜索？如何使用filter？

我正在尝试实现实时搜索功能，以及用户数据的实时自动填充。

我的页面当前效果如下：

目前我的搜索功能需要点击搜索图标才会展示结果，因此我希望将其修改为实时搜索：当我在输入框输入姓名时，会自动为我展示匹配的用户卡片。

以下是我的SearchForMembers.js代码：

const SearchForMembers = ({ teamId, fetchTeamData }) => {
  // State
  const [userResults, setUserResults] = useState([]);
  const [userSkillResults, setUsersSkillsResults] = useState([]);

  const [showResultsList, setShowResultsList] = useState(false);
  const [showResultsMsg, toggleResultsMsg] = useState(false);

  // Submit search query
  const searchForTerm = async (term) => {
    try {
      if (term !== undefined) {
        // Clear results
        setUserResults([]);
        setUsersSkillsResults([]);
        // Perform search
        const res = await axios.get(`/api/v1/search/users/${term}`);
        // Check response
        // Show message if no results were found
        if (res.data[0].length === 0 && res.data[1].length === 0) {
          toggleResultsMsg(true);
        } else {
          toggleResultsMsg(false);
          // Set users results
          setUserResults(res.data[0]);
          // Set skills results
          setUsersSkillsResults(res.data[1]);
        }
      }
    } catch (err) {
      throw new Error(err);
    }
  };

  useEffect(() => {
    if (userResults.length > 0 || userSkillResults.length > 0) {
      setShowResultsList(true);
    } else {
      setShowResultsList(false);
    }
  }, [userResults, userSkillResults]);

  return (
    <div className="container--search_for_members">
      {/* Search bar */}
      <SearchBar
        linkToPage={false}
        searchForTerm={searchForTerm}
        placeHolderText="Search for a name, skill or affiliation"
      />
      {/* Results list */}
      {showResultsList && (
        <SearchForMembersResults
          usersFound={userResults}
          userSkillResults={userSkillResults}
          teamId={teamId}
          fetchTeamData={fetchTeamData}
        />
      )}
      {showResultsMsg && (
        <>
          <p className="text--message-small">No results were found</p>
          <AddNewProfile
            teamId={teamId}
            fetchTeamData={fetchTeamData}
            variant="not in table"
          />
        </>
      )}
    </div>
  );
};

以下是我的SearchBar.js代码：

const SearchBar = ({
  linktoPage,
  searchForTerm,
  placeHolderText = "Search members or teams",
}) => {
  // Search state
  const [searchTerm, setSearchTerm] = useState("");

  const handleChange = (event) => {
    // Update state with input text
    event.preventDefault();
    setSearchTerm(event.target.value);
  };

  const handleSubmit = async (event) => {
    try {
      event.preventDefault();

      if (linktoPage) {
        // Go to page and pass query
        goToPage();
      } else {
        // Don't change pages, but pass term to search method
        searchForTerm(searchTerm);
      }
    } catch (err) {
      throw new Error(err);
    }
  };

  const goToPage = () => {
    // Go to search page and pass along the search term.
    Router.push({
      pathname: "/search",
      query: { term: `${searchTerm}` },
    });
  };

  return (
    <form className="form--search_wrapper" method="GET" onSubmit={handleSubmit}>
      <input
        className="input input--search_input"
        type="search"
        name="q"
        placeholder={placeHolderText}
        aria-label="Search bar"
        onInput={handleChange}
        pattern="^[a-zA-Z0-9 ]+"
        required
      />
      <Button 
        className="input input--search" 
        style={{ color: "white", backgroundColor: "#00B790" }} 
        type="submit" 
      >
        <SearchRoundedIcon />
      </Button>
    </form>
  );
};

我参考了相关使用Axios实现实时搜索的教程，现在的疑问是：如何在现有代码基础上使用 .filter 方法实现实时搜索需求？

内容的提问来源于stack exchange，提问作者Nathan Nguyen