React.js 函数式弹窗组件中如何在未选择付款期限前禁用提交按钮

你使用的是React函数式组件，仅需3步即可实现未选择付款期限时禁用提交按钮的功能：

• 确认付款期限状态的初始值为空
• 将Select改为受控组件，绑定value属性和状态关联
• 给Submit按钮添加disabled判断逻辑

1. 确认state初始化 #

组件中已经用到SetPaymentTerm更新状态，确保初始值设置为null或空值即可：

// 函数组件内的状态定义，初始为空
const [paymentTerm, SetPaymentTerm] = useState(null);

2. 修改Modal组件代码 #

给Select绑定value属性，给Button添加disabled属性，修改后完整代码如下：

//Modal Box Start 
<Modal show={approveShow} onHide={() => { handleApproveClose() }}>
        <Modal.Body>
          <h3>你确定要激活该用户吗</h3>
          <hr />
          <div >
            <label>选择付款期限</label>
            <Select 
              options={PaymentTermList} 
              value={paymentTerm}
              onChange={onChangePaymentValue}
            ></Select>
          </div>
        </Modal.Body>
        <Modal.Footer>
          <Button 
            variant="primary" 
            disabled={!paymentTerm}
            onClick={() => { handleApproveClose(); ChangeUserStatusBackend() }}
          >
            提交
          </Button>
        </Modal.Footer>
      </Modal>
//Modal Box End

补充说明 #

如果你的PaymentTermList中包含默认空选项，对应的值为''空字符串，可以把禁用逻辑调整得更严谨：

disabled={!paymentTerm || paymentTerm.trim() === ''}

原有onChangePaymentValue函数不需要做任何修改，现有逻辑可直接复用。

内容的提问来源于stack exchange，提问作者Waqas