Next.js中基于应用运行状态控制按钮状态的推荐实现方案咨询

你现在用DOM查询器手动操作按钮的方式确实不够React/Next.js的风格，咱们直接用React核心的状态驱动UI理念来重构就好——这也是这类场景的标准实现方式，完全不需要手动操作DOM或者依赖refs（除非是处理焦点、获取元素尺寸这类特殊需求）。

核心思路：让状态决定UI #

把按钮的禁用状态、显示文本、样式类这些可变属性，直接和你的runningState绑定，状态变化时React会自动更新UI，彻底告别手动修改DOM的操作。

具体实现代码 #

首先用语义化的字符串状态代替数字（可读性更强），然后给每个按钮的属性写动态判断：

import { useState } from 'react';

export default function YourAppPage() {
  // 定义状态：'stopped' | 'running' | 'paused'
  const [runningState, setRunningState] = useState('stopped');

  // 按钮点击的业务逻辑
  const handleStartOrCancel = () => {
    if (runningState === 'running') {
      // 这里写取消运行的逻辑
      setRunningState('stopped');
    } else {
      // 这里写启动运行的逻辑
      setRunningState('running');
    }
  };

  const handlePauseOrResume = () => {
    setRunningState(prev => prev === 'running' ? 'paused' : 'running');
    // 这里写暂停/重启的逻辑
  };

  const handleTest = () => {
    // 这里写测试操作的逻辑
  };

  return (
    <div className="app-controls">
      {/* 启动/取消按钮 */}
      <button
        className={runningState === 'running' ? 'running' : ''}
        onClick={handleStartOrCancel}
      >
        {runningState === 'running' ? 'Annuler' : 'Demarrer'}
      </button>

      {/* 暂停/重启按钮 */}
      <button
        className={`
          ${runningState === 'paused' ? 'running' : ''}
          ${runningState === 'stopped' ? 'disabled' : ''}
        `}
        onClick={handlePauseOrResume}
        disabled={runningState === 'stopped'}
      >
        {runningState === 'paused' ? 'Redemarrer' : 'Pause'}
      </button>

      {/* 测试按钮 */}
      <button
        className={runningState === 'running' ? 'disabled' : ''}
        onClick={handleTest}
        disabled={runningState === 'running'}
      >
        Test
      </button>
    </div>
  );
}

为什么这是标准模式？ #

• 符合React单向数据流：状态是唯一数据源，UI完全由状态派生，避免了手动DOM操作可能带来的同步问题
• 可读性与维护性更强：每个按钮的状态依赖一目了然，后续修改状态逻辑时，只需要调整对应的条件判断即可
• 无冗余代码：不需要额外的useEffect去监听状态变化，React会自动处理UI更新

关于Refs的补充 #

你提到函数组件里能不能用refs？当然可以，用useRef钩子就行，但绝对不推荐用refs来控制UI状态——这违背了React的设计理念。refs只适合处理那些无法用状态驱动的场景，比如获取元素的滚动位置、设置焦点、调用DOM元素的原生方法等。比如：

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

export default function Example() {
  const testBtnRef = useRef(null);
  const [runningState, setRunningState] = useState('stopped');

  useEffect(() => {
    // 比如当状态变为stopped时，自动聚焦测试按钮
    if (runningState === 'stopped' && testBtnRef.current) {
      testBtnRef.current.focus();
    }
  }, [runningState]);

  return <button ref={testBtnRef} disabled={runningState === 'running'}>Test</button>;
}

总之，这类按钮状态控制的场景，状态驱动UI是绝对的标准方案，比手动DOM操作优雅太多啦。

内容的提问来源于stack exchange，提问作者Isa