如何切换输入单选按钮每 3 秒检查一次？

Posted 2023-03-05

【中文标题】如何切换输入单选按钮每 3 秒检查一次？

【英文标题】：How to switch input radio button checked every 3 seconds?

【发布时间】：2021-07-06 02:15:57

【问题描述】：

我试图在 Next.js 中每 3 秒检查一次输入单选按钮之间切换，它从 case0 切换到 case1，从 case1 切换到 case2，但没有从 case2 切换到 case0。我在 React 和 Next.js 方面有中级知识。

import React,  useState, useRef  from 'react';

function Abb() 
  let count = 0;

  const [q1, setq1] = useState(false);
  const [q2, setq2] = useState(false);
  const [q3, setq3] = useState(false);
  const start = Date.now();
  count.toString();
  setInterval(function () 
    let eat = count % 3;
    switch (eat) 
      case 0:
        setq1(true);
        break;
      case 1:
        setq2(true);
        break;
      case 2:
        setq3(true);
        break;
      default:
        break;
    
    console.log(count + q1 + q2 + q3);
    console.log(q1);
    console.log(q2);
    console.log(q3);
    count++;
    if (count === 3) 
      count = 0;
    
   
  , 3000);

  return (
    <>
      <input type="radio" name="addd" id="" checked=q1 readOnly />
      <input type="radio" name="addd" id="" checked=q2 readOnly />
      <input type="radio" name="addd" id="" checked=q3 readOnly />
    </>
  );


export default Abb;

【问题讨论】：

尝试将count++后的条件设置为count >= 3

Bro 尝试了相同的结果，它在最后一次输入检查时停止（在 case2 上）它没有移动到 case1（第一个输入）

【参考方案1】：

每次调用 useState 的 setter (setq1, setq2, setq3) 时，函数 Abb 都会重新运行，然后组件会重新渲染。每次渲染都会启动一个新的间隔，因为它是在函数级别，而不是在 useEffect 或其他东西中。

我建议将您只想在 useEffect 中运行一次的代码与一个空的依赖数组一起包装：

useEffect(() => 
    // This code will run once, on mount of the component

    return () => 
        // This code will be run once, on unmount of the component
        // Be sure to clear any intervals, timeouts here
    
, []);

此外，您的输入元素具有checked 属性，其中包含状态。不要忘记您需要将状态设置为true 和false 才能看到更改。现在没有任何 setter 函数将状态设置为 false，所以永远不要取消选中按钮。

【讨论】：

Bro 尝试了相同的结果，它在最后一次输入检查时停止（在 case2 上）它没有移动到 case1（第一个输入）

useEffect(() => setInterval(function () let eat = count % 3; switch (eat) case 0: setq1(true); break; case 1: setq2(true) ; break; case 2: setq3(true); break; 默认值: break; count++; if (count >= 3) count = 0; , 3000); , []);

【参考方案2】：

作为@Phil mentioned in his answer，您应该将setInterval 逻辑包装在useEffect 中，以避免每次重新渲染组件时都创建一个新的setInterval。我还建议您将 count 变量移动到 state 并直接使用它来更新 inputs 选中的属性，这样可以避免为其创建 3 个单独的状态。

import React,  useState, useEffect  from 'react';

function Abb() 
    const [count, setCount] = useState(0);

    useEffect(() => 
        const intervalId = setInterval(() => 
            setCount((c) => ++c % 3);
        , 3000);
        
        return () => clearInterval(intervalId);
    , []);

    return (
        <>
            <input type="radio" name="addd" id="" checked=count === 0 readOnly />
            <input type="radio" name="addd" id="" checked=count === 1 readOnly />
            <input type="radio" name="addd" id="" checked=count === 2 readOnly />
        </>
    );


export default Abb;