以 Formik 形式包装 React-Bootstrap 可滚动模式

Question

我将 React-Bootstrap 可滚动 Modal 包装在 Formik Form 中，以便 Modal.Footer 中的按钮提交表单。但是，当我将 Modal.Body 和 Modal.Footer 包装在 Form 元素中时，它会阻止内容滚动。知道如何将模态包装在表单中并保留样式吗？这是代码：

<Modal show={this.props.displayModal} onHide={this.reset} dialogAs="div">
    <Formik initialValues={{}} validationSchema={validationSchema} onSubmit={this.handleSubmit}>
        <Form>
            <Modal.Header closeButton>
                <Modal.Title>Add Item/Modal.Title>
            </Modal.Header>
            <Modal.Body>CONTAINS FORM INPUTS</Modal.Body>
            <Modal.Footer>
                <Button type="submit" variant="primary">
                    Save
                </Button>
            </Modal.Footer>
        </Form>
    </Formik>
</Modal>

我确实尝试将 Modal 放在 Form 中，但这会导致 Modal 在 HTML 中的表单元素之外呈现。例如：

<Formik initialValues={this.initialValues} validationSchema={this.validationSchema} onSubmit={this.handleSubmit}>
    <Form>
        <Modal show={this.props.displayModal} onHide={this.reset} dialogAs="div">
           ...
        </Modal>
    </Form>
</Formik>

Answer 1

为了解决这个问题，我必须在 Form 中添加一个 Modal.Dialog，然后将 Modal 的 dialogAs 属性更改为 div .这导致 Modal.Dialog 处理我想保留的可滚动样式。

<Modal show={this.props.displayModal} onHide={this.reset} dialogAs="div">
    <Formik initialValues={{}} validationSchema={validationSchema} onSubmit={this.handleSubmit}>
        <Form>
            <Modal.Dialog scrollable size="lg">
                <Modal.Header closeButton>
                    <Modal.Title>Add Item/Modal.Title>
                </Modal.Header>
                <Modal.Body>CONTAINS FORM INPUTS</Modal.Body>
                <Modal.Footer>
                    <Button type="submit" variant="primary">
                        Save
                    </Button>
                </Modal.Footer>
            </Modal.Dialog>
        </Form>
    </Formik>
</Modal>

Answer 2

我遇到了同样的问题，我找到的解决方案是将 Formik 标签放在 Modal 标签中，并将 style="overflow-y: scroll" 传递到 Form 标签中。像这样：

<Modal
    isOpen={modal}
    toggle={toggle}
    centered
    className="modal-dialog"
    scrollable (optional*)
    size="lg"
  >
    <FormikContext.Provider value={methods}>
      <Form className="scrollable">
           <ModalHeader>
               Your header or title
            </ModalHeader>
            <ModalBody>CONTAINS FORM INPUTS</ModalBody>
            <ModalFooter>
                <Button type="submit" variant="primary">
                    Save
                </Button>
            </ModalFooter>
        </Form>
    </FormikContext.Provider>
  </Modal>

进入style.css:

 .scrollable {
    overflow-y: scroll;
  }

methods 是具有 initialValues、schemaValidations 和 onSubmit

的常量

    const methods = useFormik({
    validationSchema: mySchema,
    initialValues: {
      name: data?.name || '',
      email: data?.email || '',
    },
    enableReinitialize: true,
    onSubmit: (data) => {
      console.log('data', data);
    },
  });

*scrollable prop 用于在 modal 内滚动，如果你想要全屏滚动，请不要使用它

以 Formik 形式包装 React-Bootstrap 可滚动模式

Wrap React-Bootstrap Scrollable Modal in Formik Form

reactjs

react-bootstrap

formik