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>
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;
}
try to put a button within tag ,that way you can conditionally disable it.