为什么 React Select 没有显示所有选项？

Question

我正在使用 react-select 和 formik 来显示选项。我试图显示一周七天的名称。但它没有显示列表中的所有值。这是我的组件代码：

import { ErrorMessage, Form, Formik } from "formik";
import * as Yup from "yup";
import { Button, Col, FormGroup } from "reactstrap";
import React from "react";
import Select from "react-select";

const SEVEN_DAYS = [
  { label: "Saturday", value: "Saturday" },
  { label: "Sunday", value: "Sunday" },
  { label: "Monday", value: "Monday" },
  { label: "Tuesday", value: "Tuesday" },
  { label: "Wednesday", value: "Wednesday" },
  { label: "Thursday", value: "Thursday" },
  { label: "Friday", value: "Friday" },
];

const MyForm = (props) => {
  return (
    <Formik
      initialValues={{
        visitDays: "",
      }}
      validationSchema={Yup.object({
        visitDays: Yup.array().required("Required"),
      })}
      onSubmit={(values) => console.log(values)}
    >
      {(formikProps) => (
        <Form onSubmit={formikProps.handleSubmit}>
          <div className="form-row mt-5">
            <Col>
              <FormGroup>
                <label>Visiting Days</label>
                <Select
                  type="text"
                  name="visitingDays"
                  onChange={(option) => {
                    console.log(option);
                    option
                      ? formikProps.setFieldValue("visitingDays", option.value)
                      : formikProps.setFieldValue("visitingDays", "");
                  }}
                  options={SEVEN_DAYS}
                  onBlur={formikProps.handleBlur}
                  isMulti
                />
                <ErrorMessage
                  name="visitingDays"
                  component="div"
                  className="text-danger"
                />
              </FormGroup>
            </Col>
          </div>
          <div className="form-row mt-3 text-right">
            <Col>
              <Button
                className="primary-color"
                type="submit"
                disabled={!formikProps.dirty || formikProps.isSubmitting}
              >
                Submit
              </Button>
            </Col>
          </div>
        </Form>
      )}
    </Formik>
  );
};
export default MyForm;

它没有显示所有选项，我在滚动时看不到它。但是如果我打字，我可以获得不可见的选项。这是 UI 的图像：

我应该如何解决这个问题？我尝试了以下解决方案但无法解决问题：

How to show scrollbar on dropdown menu for react-select?

Answer 1

react-select 组件在 div 元素内呈现选项。有时它无法显示所有选项，因为其中一些选项落后于 react-select 组件的父 div。请添加一个道具 menuPortalTarget 并将其值设置为 document.body 。你的 react-select 组件看起来像

import { ErrorMessage, Form, Formik } from "formik";
import * as Yup from "yup";
import { Button, Col, FormGroup } from "reactstrap";
import React from "react";
import Select from "react-select";

const SEVEN_DAYS = [
  { label: "Saturday", value: "Saturday" },
  { label: "Sunday", value: "Sunday" },
  { label: "Monday", value: "Monday" },
  { label: "Tuesday", value: "Tuesday" },
  { label: "Wednesday", value: "Wednesday" },
  { label: "Thursday", value: "Thursday" },
  { label: "Friday", value: "Friday" },
];

const MyForm = (props) => {
  return (
    <Formik
      initialValues={{
        visitDays: "",
      }}
      validationSchema={Yup.object({
        visitDays: Yup.array().required("Required"),
      })}
      onSubmit={(values) => console.log(values)}
    >
      {(formikProps) => (
        <Form onSubmit={formikProps.handleSubmit}>
          <div className="form-row mt-5">
            <Col>
              <FormGroup>
                <label>Visiting Days</label>
                <Select
                  type="text"
                  menuPortalTarget={document.body}
                  name="visitingDays"
                  onChange={(option) => {
                    console.log(option);
                    option
                      ? formikProps.setFieldValue("visitingDays", option.value)
                      : formikProps.setFieldValue("visitingDays", "");
                  }}
                  options={SEVEN_DAYS}
                  onBlur={formikProps.handleBlur}
                  isMulti
                />
                <ErrorMessage
                  name="visitingDays"
                  component="div"
                  className="text-danger"
                />
              </FormGroup>
            </Col>
          </div>
          <div className="form-row mt-3 text-right">
            <Col>
              <Button
                className="primary-color"
                type="submit"
                disabled={!formikProps.dirty || formikProps.isSubmitting}
              >
                Submit
              </Button>
            </Col>
          </div>
        </Form>
      )}
    </Formik>
  );
};
export default MyForm;

我希望这能解决问题。

为什么 React Select 没有显示所有选项？

Why React Select does not show all the options?

html

javascript

reactjs

react-select

formik