停止输入 React Js 时调用函数 [重复]

Posted 2023-02-21

【中文标题】停止输入 React Js 时调用函数 [重复]

【英文标题】：Call function when stop typing React Js [duplicate]

【发布时间】：2021-08-20 00:33:47

【问题描述】：

我在停止打字时尝试做一些事情，我尝试了这段代码但不起作用

const handler=(e)=>
  let time;
  clearTimeout(time);
  time = setTimeout(() => 
     console.log("click");
  , 2000);

<input onChange=handler/>

【问题讨论】：

你到底想做什么？

您想等待2s 触发功能，或者在您刚停止输入后不久

当用户停止输入@isaacsan123 时，我尝试运行一个函数

在停止输入@CrispenGari 后不久

【参考方案1】：

你存储超时ID的变量需要在函数外部定义，否则每次调用handler都会得到一个新的、未定义的变量。

也就是说，you are probably reinventing the wheel。

【讨论】：

你能给我示例代码吗？我尝试了很多教程但还是看不懂

将let time;移到函数外。两排。

鉴于这是 React，不会在组件重新渲染时重新声明时间变量，从而使 clearTimeout 没有 id 吗？

会，但处理函数不会触发重新渲染。

【参考方案2】：

如果在 2 秒内有更多输入，我假设您想取消计时器。目前，你的 time 变量的作用域是处理函数，所以函数执行完成时值会丢失。

尝试使用状态来跟踪你的计时器：

const [timerID, setTimerID] = useState(null);
  
const handler = (e) => 
  clearTimeout(timerID);
  const id = setTimeout(() => console.log("click"), 2000);
  setTimerID(id)

  
return <input onChange=handler/>

【参考方案3】：

time 应该在你的函数之外。

var time;
const handler = (cmp) => 
  clearTimeout(time);
  time = setTimeout(() => 
    console.log(`You typed $cmp.value`);
  , 2000);

<input onChange="handler(this)" />

另外，2 秒似乎有点长。

【参考方案4】：

我知道有更好的方法，但现在试试这个。

const [typing, setTyping] = useState(true)
useEffect(() =>
if(! typing)
console.log("stop typing")
 
, [typing] ) 
const handleKeyUp =() =>
   setTyping(true) 
     setTimeout(()=>
       setTyping(false) 
, 100) 
 
<input onChange=handler onKeyup=handleKeyUp/>

【参考方案5】：

您可以使用 ref 来跟踪计时器。这应该保持对重新渲染的引用，并且不会导致组件的额外重新渲染。

const Typing = () => 
  const timer = React.useRef();
  
  const handler = (e) => 
    clearTimeout(timer.current);
    timer.current = setTimeout(() => 
       console.log("Typed: " + e.target.value);
    , 2000);
  
  
  return <input onChange=handler />;
;

const App = () => <Typing />;
ReactDOM.render(<App />, document.getElementById('root'));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>