时间戳

首页 > 解决方案 > 用反应实时填充搜索

javascript - 用反应实时填充搜索

问题描述

现在我的搜索功能是我必须单击搜索图标才能使其显示为结果，因此我想将其更改为实时搜索。当我在输入中输入名称时，它将自动启动为我显示用户卡

这是我的以下代码：

const [searchQuery, setSearchQuery] = useState("");

  const handleChange = (event) => {
    event.preventDefault();
    setSearchQuery(event.target.value);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    const res = await axios.get(
      `/api/v1/search/users/invite/${searchQuery}/${teamId}`
    );
    setInvitees(res.data[0]);
    setShowInvitees(!showInvitees);
  };
  useEffect(() => {
    if (searchQuery === "") {
      setInvitees([]);
    }
  }, [searchQuery]);

        <form onSubmit={handleSubmit}>
          <div className="invitees-search">
            <Button
              className="input invitees--search-icon"
              style={{ color: "white", backgroundColor: "#00B790" }}
              type="submit"
            >
              <SearchIcon />
            </Button>
            <input
              className="invitees--search_input"
              type="text"
              name="name"
              onChange={handleChange}
              placeholder="Name"
              aria-label="Search bar"
              pattern="^[a-zA-Z0-9 ]+"
              required
            />
          </div>
        </form>

当我的搜索查询长度 >= 2 个字母时，如何使其自动填充？

标签： javascriptreactjsreact-hooks

解决方案

您可以在useEffect

解释：

  1. 我将您的handleSubmit功能重命名为getInvitees
  2. 长度大于等于2时调用getInvitees函数searchQuery

解决方案

useEffect(() => {
   if(searchQuery === "") {
      setInvitees([]);
   }    
   if((searchQuery||'').length >= 2) {
      getInvitees();
   }    
}, [searchQuery]);

const getInvitees = async () => { // renamed handleSubmit function to getInvitees
   const res = await axios.get(`/api/v1/search/users/invite/${searchQuery}/${teamId}`);
   setInvitees(res.data[0]);
   setShowInvitees(!showInvitees);
};

推荐阅读