Javascript 使用react实时填充搜索

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

以下是我的代码：

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>

const[searchQuery，setSearchQuery]=useState（“”）；
常量handleChange=（事件）=>{
event.preventDefault（）；
setSearchQuery（event.target.value）；
};
const handleSubmit=async（e）=>{
e、 预防默认值（）；
const res=等待axios.get(
`/api/v1/search/users/invite/${searchQuery}/${teamId}`
);
setinvites（res.data[0]）；
设置ShowInvites（！ShowInvites）；
};
useffect（（）=>{
如果（searchQuery==“”）{
被邀请者（[]）；
}
}，[searchQuery]）；

---

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

您可以借助

useffect

说明：

我将您的

handleSubmit

函数重命名为

getInvitees

当

searchQuery

长度大于或等于2时调用

getInvitees

函数

解决方案

---

我收到错误

TypeError:无法读取未定义的属性“preventDefault”

@NhanNguyen删除该行，现在不需要该行。我也更新了答案。我可以问一下吗！为什么我们要使用

useffect

？您也可以在handleChange中执行相同的代码，但是您必须将e.target.value传递给GetInvites函数。这是因为seState（setSearchQuery（e.target.value））的异步性质。您可以通过handleChange方法中的console.log（searchQuery）来检查这一点。在这里，当您输入时，您将得到旧值。但在useEffect回调中，您将始终获得最新的更新值。请不要忘记使用

debounce

优化代码，如下所示：

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);
};