永久禁用按鈕

Question

在React中，當登入使用者是會員時，我可以停用按鈕嗎？

當我使用disabled屬性時，它可以從開發者工具中刪除，按鈕會重新啟動。

請幫助我，我希望當登入使用者是會員時，按鈕會保持停用。即使從開發者工具中刪除了disabled屬性，按鈕仍然應該保持停用狀態。

Answer 1

您可以使用disabled屬性來停用按鈕，但這並不能阻止使用者在開發工具中刪除disabled屬性並重新啟用按鈕。為了避免這種情況，您還應該使用disabled值來有條件地處理按鈕的點擊事件監聽器。

例如：

import { useState } from "react";

export default function App() {
  const [disabled, setDisabled] = useState(false);
  const handleClick = (e) => {
    console.log(e.target);
  };

  return (
    <div className="App">
      <button onClick={() => setDisabled((disabled) => !disabled)}>
        disable button
      </button>
      <button disabled={disabled} onClick={disabled ? null : handleClick}>
        click
      </button>
    </div>
  );
}

這樣，即使使用者刪除了disabled屬性，按鈕也不會有任何點擊處理程序附加到它上面。