How to disable an tag in React after clicking it?

Question

How can I disable the below anchor tag in React after it has been clicked? Like the onClick functionality is not working on the anchor tag.

<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>

try to put a button within tag ,that way you can conditionally disable it. — ertemishakk, Feb 04 '22 at 03:47
Hey ertemishakk, Thank u so much for your reply. I have used the First one you suggested to me, Giving the button inside the anchor tag. — Ninja, Feb 04 '22 at 04:59
Please accept the answer as correct - if it helped you. Thanks — ertemishakk, Feb 06 '22 at 23:51
"*the onClick functionality is not working on the anchor tag*" - I don't see an `onClick` handler on your anchor element? — Bergi, Feb 06 '22 at 23:53

score 2 · Accepted Answer · answered Feb 08 '22 at 21:30

How about setting a conditional class on the anchor tag and disabling it through css? It would need a state variable to hold the disabled state. Code would look something like.

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>

And the disabled class

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

score -1 · Answer 2 · answered Feb 06 '22 at 23:50

-1

try to put a button within tag ,that way you can conditionally disable it.

answered Feb 06 '22 at 23:50

ertemishakk

517
3
14

2

You shouldn't be nesting ` – Terry Feb 06 '22 at 23:52
You might mean around the anchor tag (not within). That's an option – Mark Swardstrom Dec 20 '22 at 16:43

How to disable an tag in React after clicking it?

2 Answers2