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

【问题标题】：Wrap React-Bootstrap Scrollable Modal in Formik Form以 Formik 形式包装 React-Bootstrap 可滚动模态
【发布时间】：2019-09-02 09:16:54
【问题描述】：

我将 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>

【问题讨论】：

你好，你的目标是提交后关闭模态框吗？我正在努力寻找一种在单击“保存”后不关闭模式的方法，因为我还有其他内容要显示。知道怎么做吗？
恐怕我不记得确切的行为了。 AFAIK，您应该能够覆盖表单提交行为，因此表单不会关闭。

标签： reactjs react-bootstrap formik

【解决方案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>

【讨论】：

【解决方案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

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

*scrollable 属性用于在模态框内滚动，如果你想要全屏滚动，不要使用它

【讨论】：