我需要更改状态以维护用户正在键入的字符串。但是我想延迟操作直到用户停止打字。但我不太清楚如何做到这两点。
因此,当用户停止输入时,我希望触发一个操作,但不是在此之前。有什么建议吗?
最佳答案
使用 React Hooks 和 Function 组件
要保留用户正在输入的字符串,请使用 useState
Hook 来存储用户正在输入的文本。然后将该状态赋予输入值。另请务必在输入的 onChange
事件处理程序上使用 setState
,否则输入值不会更改。
要仅在用户停止键入后的某个时间触发操作,您可以将 useEffect
Hook 与 setTimeout
一起使用。在本例中,我们希望在输入值更改时触发 useEffect
,因此我们将创建一个 useEffect
Hook ,并在其依赖项数组上为其提供值为输入。提供给 useEffect
的函数应使用 setTimeout
在所需的延迟时间后触发操作。此外,为 useEffect
提供的函数应该返回一个清除超时设置的清理函数。这可以避免对不再与用户相关的输入值执行操作。
下面是一个应用程序的小示例,它使用上述步骤来保持用户正在键入的字符串可见,并在用户停止键入后 500 毫秒显示完成的字符串。
function App() {
const [query, setQuery] = useState("");
const [displayMessage, setDisplayMessage] = useState("");
useEffect(() => {
const timeOutId = setTimeout(() => setDisplayMessage(query), 500);
return () => clearTimeout(timeOutId);
}, [query]);
return (
<>
<input
type="text"
value={query}
onChange={event => setQuery(event.target.value)}
/>
<p>{displayMessage}</p>
</>
);
}
关于javascript - ReactJS 在打字时延迟 onChange,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53071774/