时间戳

首页 > 解决方案 > 如何停止对每个输入事件的响应

javascript - 如何停止对每个输入事件的响应

问题描述

我正在尝试将搜索下拉项添加到表中。
问题陈述——
当我为每个输入事件按下退格请求调用和响应时第一次搜索后，是否有可能在搜索并按下退格之后，每个输入都不会响应？

标签： javascriptreactjs

解决方案

所以你想要做的是设置一个超时，这样 onChange 函数直到最后一次更改的 X 时间后才会执行。

import React, { useState, useEffect } from 'react';

export const App = () => {
  const [value, setValue] = useState("");

  const handleOnChange = (event) => {
    setValue(event.target.value);
  };

  useEffect(() => {
    const timeoutId = setTimeout(() => console.log(`I can see you're not typing. I can use "${value}" now!`), 1000);
    return () => clearTimeout(timeoutId);
  }, [value]);

  return(
    <>
      <h1>{value}</h1>
      <input onChange={handleOnChange} value={value} />
    </>
  );
};

推荐阅读