不使用useState如何实现按钮点击一次后禁用？

Hey there! Let's break down your questions and fix that code step by step.

问题1：不使用useState()，如何实现仅点击一次就禁用按钮？ #

If you don't want to use useState, React's useRef is a perfect alternative—it stores a mutable value that persists across component renders, and modifying it won't trigger a re-render. We can use refs to track whether the button has been clicked, then directly manipulate the DOM element to disable it:

import React, { useRef } from "react";

export default function App() {
  const buttonRef = useRef(null);
  const hasClicked = useRef(false);

  const handleClick = () => {
    if (!hasClicked.current) {
      alert("hi");
      hasClicked.current = true;
      // Directly update the DOM to disable the button
      buttonRef.current.disabled = true;
    }
  };

  return (
    <div>
      <button ref={buttonRef} onClick={handleClick}>
        Click Once
      </button>
    </div>
  );
}

You can even simplify it by checking the button's native disabled state directly, without an extra ref:

import React, { useRef } from "react";

export default function App() {
  const buttonRef = useRef(null);

  const handleClick = () => {
    if (!buttonRef.current.disabled) {
      alert("hi");
      buttonRef.current.disabled = true;
    }
  };

  return (
    <div>
      <button ref={buttonRef} onClick={handleClick}>
        Click Once
      </button>
    </div>
  );
}

问题2：在useState中不使用单独的处理函数，如何实现按钮点击一次后禁用？（Plus fixing your code issues） #

First, let's fix the problems in your original code:

• Regular variable limitation: let disable = false gets reinitialized every time the component renders. Changing it won't trigger a re-render, so the button's disabled prop never updates, and the value resets to false on the next render.
• Backwards logic: Your if (disable) checks if the button is already disabled before running the action—this is the opposite of what you want.
• Invalid function call: disable(false) is wrong because disable is a boolean variable, not a function.

If you want to use useState without a separate handler function, you can put all the logic directly in the onClick callback:

import React, { useState } from "react";

export default function App() {
  const [isDisabled, setIsDisabled] = useState(false);

  return (
    <div>
      <button 
        disabled={isDisabled} 
        onClick={() => {
          if (!isDisabled) {
            alert("hi");
            setIsDisabled(true);
          }
        }}
      >
        Click Once
      </button>
    </div>
  );
}

Here, we handle the alert and state update directly in the arrow function passed to onClick. When the button isn't disabled, we run the alert and set isDisabled to true, which triggers a re-render and disables the button.

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