使用react实时填充搜索

Question

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

这是我的以下代码：

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>

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

Answer 1

您可以在useEffect的帮助下完成此操作

解释：

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

解决方案

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