¿Cómo puedo deshabilitar la etiqueta de anclaje a continuación en React después de haber hecho clic en ella? Al igual que la funcionalidad onClick no funciona en la etiqueta de anclaje.
<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>¿Qué tal establecer una clase condicional en la etiqueta de anclaje y deshabilitarla a través de css? Necesitaría una variable de estado para mantener el estado deshabilitado. El código se vería algo así.
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>Y la clase discapacitada
.disabled { pointer-events: none; cursor: pointer; }intente poner un botón dentro de la etiqueta, de esa manera puede deshabilitarlo condicionalmente.