单击后如何在 React 中禁用 <a> 标签？

Question

点击后如何在 React 中禁用下面的锚标记？就像 onClick 功能在锚标记上不起作用。

<td align="left">
  <input
    type="file"
    accept=".csv,.xlsx,.xls"
    name="image"
    className="file-upload-input"
    onChange={(e: any) => {
      handleFileChange(e, data.c_id);
    }}
  />

  <a
    href="javascript:;"
    className="btn btn-secondary"
    style={{
      width: "125.62px",
      backgroundColor: "#0b5ed7",
      borderColor: "#0a58ca"
    }}
  >
    <img src={UploadIcon.default} />
    Upload
  </a>
</td>

Answer 1

如何在锚标签上设置条件类并通过css禁用它？它需要一个状态变量来保持禁用状态。代码看起来像。

const [disabled, setDisabled] = useState();

<a
  href="javascript:;"
  onClick={() => {
  // setting the state on click
    setDisabled(true);
  }}
  // Adding class here
  className={`btn btn-secondary${disabled ? " disabled" : ""}`}
  style={{
    width: "125.62px",
    backgroundColor: "#0b5ed7",
    borderColor: "#0a58ca"
  }}
>
  <img src={""} />
  Upload
</a>

还有残疾班

.disabled {
  pointer-events: none;
  cursor: pointer;
}

Answer 2

尝试在标签中放置一个按钮，这样你就可以有条件地禁用它。