javascript - 在时间 react 后执行 Action

Question

我正在根据用户输入更改我的状态。像这样 :

    <form>
        <input type='text' onChange={handleSearchChange} placeholder='Zoeken'></input>
    </form>

和处理程序:

const handleSearchChange = (e) => {
    setSearchKey(e.target.value.toLowerCase().trim());
}

setSearchKey 设置状态。当用户停止输入至少 0.5 秒时，我想调用 setSearchKey 函数。现在，只要用户键入，该函数就会被调用，但我希望用户键入并在用户键入后 0.5 秒调用 set 函数。这可能与 setTimeOut ，不知道如何在我的情况下实现这一点。

Answer 1

首先创建一个超时引用:

const timeOut = useRef(null);

然后修改您的 handleSearchChange:

const handleSearchChange = (e) => {
    clearTimeout(timeOut.current);
    timeOut.current = setTimeout(() => {
        setSearchKey(e.target.value.toLowerCase().trim());
    }, 500);
}