基於在 Next.js 中運行 state 的應用程序的按鈕可見性

Question

我正在嘗試在 Next.js 中找到實現此類功能的推薦模式。

基本上，我在 Next.js 頁面中有一個迷你應用程序。 該頁面保留 state（稱為 runningState）。 runningState 可以停止、運行或暫停。 我還有三個按鈕——開始、暫停和測試。 我想根據正在運行的 state 更改這些按鈕的可見性。 例如，如果“應用程序”未運行，則暫停將被禁用。 僅當應用程序停止或暫停時才會啟用測試。

為了控制按鈕，我目前在 useEffect 中使用 DOM 查詢選擇器。 這種方法似乎很駭人聽聞。 我更喜歡使用像 Refs 這樣的東西，這樣我就可以直接控制元素，但是似乎我不能將它們與功能組件一起使用？ 我采用的另一種方法是將邏輯放入按鈕本身，但這似乎也違反直覺且范圍很差。

目前：

    //app logic
    const startBtn = document.getElementById("start");
    const pauseBtn = document.getElementById("pause");
    const testBtn = document.getElementById("test");

    //app logic
    switch (runningState) {
      case 0:
        startBtn.classList.remove("running");
        startBtn.innerHTML = "Demarrer";

        pauseBtn.classList.add("disabled");
        pauseBtn.classList.remove("running");
        pauseBtn.disabled = true;
        pauseBtn.innerHTML = "Pause";

        testBtn.classList.remove("disabled");
        testBtn.disabled = false;

        break;
      case 1:
        startBtn.classList.add("running");
        startBtn.innerHTML = "Annuler";

        pauseBtn.classList.remove("disabled");
        pauseBtn.classList.remove("running");
        pauseBtn.disabled = false;
        pauseBtn.innerHTML = "Pause";

        testBtn.classList.add("disabled");
        testBtn.disabled = true;

        break;
      case 2:
        pauseBtn.classList.add("running");
        pauseBtn.innerHTML = "Redemarrer";
        testBtn.classList.remove("disabled");
        testBtn.disabled = false;

        break;
    }

那么，是否有某種模式呢？ 謝謝

Answer 1

您可以使用 useRef 如下

  const startRef = useRef(null);
  const pauseRef = useRef(null);
  
  const onClickStart = () => {
    const button = startRef.current.className = ""; 
  };
   const onClickPause = () => {
    const button = startRef.current.className = "disabled"; 
  };
  
  <button ref={startRef} className="" onClick={onClickStart}>Start</button>
  <button ref={pauseRef} className="" onClick={onClickPause}>Pause</button>```