反应 - 选择导致页面向下滚动

Question

我在我的项目中使用react-select。

我有很多选择，并且需要打开这些选择，因此我使用道具 menuIsOpen={true} 但由于某种原因，该道具导致页面向下滚动到几乎页面中间。

当我设置 menuIsOpen={false} 时，页面不会向下滚动，但它不能解决问题，因为我必须打开选择

有人熟悉这个问题吗？

      <Select
        styles={filter.name !== "More" ? basicStyles : moreStyles}
        isMulti={filter.name !== "colorType" ? true : false}
        options={options}
        hideSelectedOptions={false}
        closeMenuOnSelect={false}
        placeholder=""
        value={selectedValues ? selectedValues : []}
        isClearable={false}
        isSearchable={false}
        onChange={addSelectFilter}
        components={{ MultiValueLabel: customMultiValueLabel }}
        blurInputOnSelect={false}
        classNamePrefix={filter.name === "More" ? "more" : "basic-drop"}
        className={filter.name === "More" ? "more-select-container" : undefined}
        menuIsOpen={
          filter.name === "More" ? undefined : menuIsOpen ? true : undefined
        }
      />

Answer 1

menuPosition这个问题是由prop的默认值 引起的absolute。在长下拉列表中，下拉区域会溢出屏幕并使浏览器向下滚动。

menuPosition="fixed"作为道具添加到Select组件中，它应该可以工作。那么你也不需要手动设置 z-index。

Answer 2

我也遇到了同样的问题，这很烦人！我通过设置一些自定义样式并添加门户的道具来解决这个问题，例如：

    const customSelectProps = {
        menuPortalTarget: document.getElementById('root'),
        customStyles: {
            menuPortal: base => {
                const { zIndex, ...rest } = base;
                return { ...rest, zIndex: 9999 };
            },
        },
    };