Schaltfläche dauerhaft deaktivieren

Question

Kann ich in React eine Schaltfläche deaktivieren, wenn der angemeldete Benutzer Mitglied ist?

Wenn ich das deaktivierte Attribut verwende, kann es aus den Entwicklertools entfernt werden und die Schaltfläche wird wieder aktiviert.

Bitte helfen Sie mir, ich möchte, dass die Schaltfläche deaktiviert bleibt, wenn der angemeldete Benutzer Mitglied ist. Auch wenn das Attribut „disabled“ aus den Entwicklertools entfernt wird, sollte die Schaltfläche weiterhin deaktiviert bleiben.

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