react-bootstrap 全屏 Modal 嵌入 Form 后提交功能失效问题咨询

问题根因 #

提交失效确实和Form放置位置相关，核心有两点：

1. react-bootstrap Modal默认通过Portal挂载到body节点下，你写的JSX嵌套结构和最终渲染的DOM结构如果不匹配，会导致提交按钮不在Form的DOM子树范围内，无法触发默认提交事件。
2. 全屏Modal的DOM层级和普通Modal有差异，如果你只把Form放在Modal.Body内部，Footer里的提交按钮不在Form范围内，自然无法触发表单提交。

修复方案 #

方案1：Form完整包裹Modal内容 #

把Form直接作为Modal的第一个子元素，完整包裹Modal.Header、Modal.Body、Modal.Footer，确保提交按钮在Form内部。

<Modal show={show} fullscreen>
  <Form onSubmit={handleSubmit(onSubmit)}>
    <Modal.Header closeButton>
      <Modal.Title>表单弹窗</Modal.Title>
    </Modal.Header>
    <Modal.Body>
      {/* 表单控件，用react-hook-form的register绑定 */}
      <Form.Group controlId="testInput">
        <Form.Label>测试输入</Form.Label>
        <Form.Control {...register('testInput')} />
      </Form.Group>
    </Modal.Body>
    <Modal.Footer>
      <Button variant="secondary" onClick={handleClose}>关闭</Button>
      <Button variant="primary" type="submit">提交</Button>
    </Modal.Footer>
  </Form>
</Modal>

方案2：用id关联表单和提交按钮 #

如果不想把Form套在Modal最外层，可以给Form设置唯一id，提交按钮添加form属性关联该id，即使按钮不在Form的DOM子树内也能触发提交。

<Modal show={show} fullscreen>
  <Modal.Header closeButton>
    <Modal.Title>表单弹窗</Modal.Title>
  </Modal.Header>
  <Modal.Body>
    <Form id="modal-form" onSubmit={handleSubmit(onSubmit)}>
      {/* 表单控件 */}
      <Form.Group controlId="testInput">
        <Form.Label>测试输入</Form.Label>
        <Form.Control {...register('testInput')} />
      </Form.Group>
    </Form>
  </Modal.Body>
  <Modal.Footer>
    <Button variant="secondary" onClick={handleClose}>关闭</Button>
    <Button variant="primary" type="submit" form="modal-form">提交</Button>
  </Modal.Footer>
</Modal>

注意事项 #

• 确认react-hook-form的handleSubmit方法正确绑定在Form的onSubmit事件上，无拼写错误。
• 如果使用FormProvider，确保其作用域覆盖所有用到useFormContext的表单控件。

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