如何解决React onchange 事件搜索 api onChange 无法正常工作
我正在使用来自用户的关键字在我的数据库中搜索用户。我将值保持在我的状态并尝试在 onChnge() 事件上调用 API,但它冻结了我的输入字段,我无法在输入字段中添加或删除字符,我在 onChange() 之后立即调用 API,
我尝试了 onSubmit 它的魅力,但我想在每次击键时调用 API。
const CardAddChat = () => {
const initialState = {
private: true,search: "",usersList: [],selectedPersons: [],};
const [state,setState] = useState(initialState);
const handleChange = (e) => {
setState({ ...state,search: e.target.value });
};
const handleSubmit = async (e) => {
e.preventDefault();
try {
let res = await axios.get(`/api/users?term=${state.search}`);
setState({ ...state,usersList: res.data.data });
} catch (error) {
console.error(error);
}
};
const handleGroupChange = () => {
setState({ ...state,private: !state.private });
};
return (
<>
<div className=" w-96 flex flex-col bg-blueGray-200 ">
<h1 className="text-2xl p-3 border-b">
{state.private ? "New Private Chat" : "New Group Chat"}
</h1>
<div className="flex-none pb-2 ">
<form
onSubmit={handleSubmit}
class="pt-2 relative mx-auto w-full px-2 text-gray-600 flex items-center"
>
<input
class="px-3 bg-white h-10 rounded-full text-xs focus:outline-none w-full pr-10"
type="search"
name="search"
value={state.search}
onChange={handleChange}
placeholder="Search for messages or users.."
/>
这里是暂时的,我调用 API onSubmit 但可以通过任何方式使其在 onChange 时触发。 提前致谢。
解决方法
如果您已经获取了所有用户,那么您只需过滤列表,而不需要获取已获取列表的子集。
如果您必须通过 onChange
处理程序获取用户,请考虑使用 lodash's debounce function - 它会等待输入停止一小段时间之前。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。