javascript - 如何在未选择付款期限之前禁用按钮 Reactjs？

Question

功能基本弹出模式组件...需要帮助禁用提交，直到用户未选择任何付款期限。

//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);
      }

标签： javascriptreactjs

Answer 1

假设onChangePaymentValue是一个更新状态的函数，将初始状态设置为零。更新状态时，您可以更改按钮的状态。当它为零时禁用它。如果它不为零，请启用它。

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>