Función Componente modal emergente base... Necesito ayuda para deshabilitar Enviar hasta que el usuario no seleccione ningún término de pago.
//Modal Box Start <Modal show={approveShow} onHide={() => { handleApproveClose() }}> <Modal.Body> <h3>Are You Sure You Want to Activate the User</h3> <hr /> <div > <label>Select Payment Term</label> <Select options={PaymentTermList} onChange={onChangePaymentValue}></Select> </div> </Modal.Body> <Modal.Footer> <Button variant="primary" onClick={() => { handleApproveClose(); ChangeUserStatusBackend() }}> Submit </Button> </Modal.Footer> </Modal> //Modal Box EndonChangePaymentValue:
function onChangePaymentValue(event) { console.log(event.value); SetPaymentTerm(event.value); }Suponiendo que onChangePaymentValue es una función que actualiza el estado, establezca el estado inicial en cero. Cuando actualiza el estado, puede cambiar el estado del botón. Cuando sea cero, desactívelo. Si no es cero, habilítelo.
const { useState } = React; function Example() { const [ paymentValue, setPaymentValue ] = useState(0); function onChangePaymentValue(e) { setPaymentValue(e.target.value); } function handleClick() { console.log('Button clicked'); } return ( <div> <select onChange={onChangePaymentValue}> <option selected>Choose a number</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button onClick={handleClick} disabled={!paymentValue}>Submit</button> </div> ); }; // Render it ReactDOM.render( <Example />, document.getElementById("react") ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>si el estado del plazo de pago es así:
const[PaymentTerm,SetPaymentTerm] = useState(0); por lo que debe cambiar onChangePaymentValue a:
function onChangePaymentValue(event) { SetPaymentTerm(event.target.value); } Y también cambie el button a:
<Button disabled={PaymentTerm == 0} variant="primary" onClick={() => { handleApproveClose(); ChangeUserStatusBackend() }}> Submit </Button>