永久禁用按钮

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属性，按钮也不会有任何点击处理程序附加到它上面。