如何根据React Bootstrap表单填写状态条件禁用提交按钮

完全可以实现这类表单验证，通过React状态管理结合简单的验证逻辑就能达成需求，具体实现步骤如下：

1. 引入状态管理 #

使用React的useState钩子跟踪表单字段值与提交状态：

import { useState } from 'react';
import { Form, Col, Button } from 'react-bootstrap';

// 组件内部定义状态
const [formData, setFormData] = useState({
  name: '',
  email: '',
  phone: '',
  message: ''
});
const [isSubmitting, setIsSubmitting] = useState(false);

2. 绑定字段变更事件 #

为每个输入控件添加onChange事件，实时更新表单状态：

const handleInputChange = (e) => {
  const { name, value } = e.target;
  setFormData(prev => ({ ...prev, [name]: value }));
};

3. 编写验证逻辑 #

创建函数判断表单是否满足启用按钮的条件：

const isFormValid = () => {
  // 验证姓名非空
  const isNameValid = formData.name.trim() !== '';
  // 验证留言非空
  const isMessageValid = formData.message.trim() !== '';
  // 验证邮箱格式（基础正则）
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const isEmailValid = emailRegex.test(formData.email.trim());
  
  return isNameValid && isMessageValid && isEmailValid;
};

4. 修改表单控件与按钮状态 #

更新表单控件绑定状态与事件，同时将按钮禁用状态关联到验证结果：

let contactForm = (
  <Form onSubmit={sendEmail} className='toggle-contact-form'>
    <div className='toggle-contact-form__header'>
      <p className='p1'>Please Reach out!</p>
      <p className='p2'>Use our contact form to reach out with any questions, concerns or issues with the website.</p>
    </div>

    <Form.Row style={{ paddingTop: 20 }}>
      <Form.Group as={Col} controlId='name'>
        <Form.Label>Name</Form.Label>
        <Form.Control
          className='cbb-home-input'
          placeholder='required'
          name="name"
          value={formData.name}
          onChange={handleInputChange}
        />
      </Form.Group>
    </Form.Row>

    <Form.Row>
      <Form.Group as={Col} controlId='email'>
        <Form.Label>Email Address</Form.Label>
        <Form.Control
          className='cbb-home-input'
          type='email'
          placeholder='required'
          name="email"
          value={formData.email}
          onChange={handleInputChange}
        />
      </Form.Group>
    </Form.Row>

    <Form.Row>
      <Form.Group as={Col} controlId='phone'>
        <Form.Label>Phone Number</Form.Label>
        <Form.Control
          className='cbb-home-input'
          placeholder='optional'
          name="phone"
          value={formData.phone}
          onChange={handleInputChange}
        />
      </Form.Group>
    </Form.Row>

    <Form.Row>
      <Form.Group as={Col} controlId='message'>
        <Form.Label>Message</Form.Label>
        <Form.Control
          className='cbb-home-input'
          as='textarea'
          rows='2'
          placeholder='required'
          name="message"
          value={formData.message}
          onChange={handleInputChange}
        />
      </Form.Group>
    </Form.Row>

    <Form.Row>
      <Form.Group as={Col} controlId='button'>
        <Button variant='primary' type='submit' disabled={!isFormValid() || isSubmitting}>
          {isSubmitting ? 'Sending Email...' : 'Submit'}
        </Button>
      </Form.Group>
    </Form.Row>
  </Form>
);

额外说明 #

• 邮箱验证的正则可根据需求调整，上述为基础格式校验
• 若需要实时错误提示，可结合React Bootstrap的Form.Control.Feedback组件展示错误信息
• 提交函数sendEmail中需处理isSubmitting状态切换，比如提交开始时设为true，完成后设为false

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