如何在Reactjs中停止setTimeout onClick

在Reactjs中停止setTimeout的方法是使用clearTimeout函数。当我们在组件中使用setTimeout函数创建一个定时器时，我们可以将返回的定时器ID存储在组件的状态或引用中。然后，在组件的生命周期方法中，比如componentWillUnmount，我们可以使用clearTimeout函数来停止定时器。

以下是一个示例代码：

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

function MyComponent() {
  const [timerId, setTimerId] = useState(null);

  useEffect(() => {
    // 在组件挂载时启动定时器
    const id = setTimeout(() => {
      console.log('定时器触发');
    }, 1000);
    setTimerId(id);

    // 在组件卸载时停止定时器
    return () => {
      clearTimeout(timerId);
    };
  }, []);

  const stopTimer = () => {
    clearTimeout(timerId);
  };

  return (
    <div>
      <button onClick={stopTimer}>停止定时器</button>
    </div>
  );
}

export default MyComponent;

在上述代码中，我们使用useState来创建一个状态timerId，用于存储定时器ID。在组件挂载时，我们使用useEffect来启动定时器，并将返回的ID存储在timerId状态中。同时，我们使用useEffect的返回函数来清除定时器，以确保在组件卸载时停止定时器。

另外，我们还创建了一个stopTimer函数，用于在点击按钮时手动停止定时器。当按钮被点击时，stopTimer函数会调用clearTimeout来停止定时器。

这样，当组件挂载时，定时器会启动并每隔1秒触发一次。当点击按钮时，定时器会被立即停止。

推荐的腾讯云相关产品：无

请注意，以上答案仅供参考，具体实现方式可能因项目需求或个人偏好而有所不同。