如何禁用按钮，直到付款期限没有选择Reactjs?

Question

Function Base Popup Modal component…需要帮助禁用提交，直到用户没有选择任何付款条款。

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

onChangePaymentValue:

function onChangePaymentValue(event) {

console.log(event.value);
SetPaymentTerm(event.value);
}

Answer 1

如果付款条款的状态是这样的:

const[PaymentTerm,SetPaymentTerm] = useState(0);

所以你需要把onChangePaymentValue改成:

function onChangePaymentValue(event) {
SetPaymentTerm(event.target.value);
}

并将button改为:

<Button disabled={PaymentTerm == 0} variant="primary" onClick={() => { handleApproveClose(); ChangeUserStatusBackend() }}>
Submit
</Button>

Answer 2

假设onChangePaymentValue为状态更新函数，设初始状态为0。当你更新状态时，你可以改变按钮的状态。当它为零时，禁用它。如果不为0，则启用。

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>