Estoy tratando de deshabilitar un botón después de hacer clic en él, pero no tiene la etiqueta de deshabilitado. Otra cosa extraña es que si hago clic en el botón dos veces, se desactivará. Código a continuación
const [loading, setLoading] = useState('Submit'); ... <form onSubmit={(event) => { event.preventDefault(); submitBet(units, line, team, gameID); }}> ... <button type='submit' className='submit-betslip' id='submit-button-id'>{loading}.</button> </form> La variable de loading es un useState. La función onSubmit:
const submitBet = async (units, line, team, id) => { if (Number(units) === 0 && Number(line) === 0) { console.log('Empty input'); return } try { document.getElementById('submit-button-id').disabled = true; } ... }No estoy seguro de si importa, pero el formulario está dentro de una función React. ¿Alguna idea?
Aquí hay un ejemplo simple de lo que quiere hacer y está funcionando perfectamente.
import React from "react"; import "./styles.css"; export default function App() { const [loading, setLoading] = React.useState("Submit"); const handleSubmit = (e) => { e.preventDefault(); setLoading("Submitting.."); setTimeout(() => { alert("submitted Successfully"); setLoading("Submit"); }, 3000); }; return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <form onSubmit={handleSubmit}> <input id="f1" name="f1" /> <button type="submit" disabled={loading !== "Submit"}> {loading}. </button> </form> </div> ); }Simplemente vincule el accesorio de desactivación al estado de carga.
Si eso no es lo que quiere hacer, simplemente comparta el componente con nosotros y me encantaría ayudarlo.