反应选择下拉菜单在模态内打开

Question

我有一个自定义模式，里面有 2 个 react-select 组件。如果内容超过其大小，模态主体已准备好自动滚动，但 react-select 组件下拉列表会在模态内打开并带有此溢出，这正是我不想要的。没有溢出，它工作正常。

我正在使用 CSS 模块。

<div className={styles.modalBody}>
    {this.props.children}
</div>

.modalBody {
    padding: padding;
    flex: 1 1 auto;
    height: 45vh;
    max-height: 100%;
    overflow: auto;
}

<Select
    id={this.props.id}
    className={styles[this.props.selectType ? this.props.selectType : 'selectWhite']}
    classNamePrefix="select"
    name={this.props.name}
    value={selectedOption ? selectedOption : this.props.value}
    placeholder={this.props.placeholder}
    onChange={this.onChange}
    options={this.props.options}
    isDisabled={this.props.disabled}
    isSearchable={false}/>

我怎样才能解决这个问题？谢谢！:)

Answer 1

你想看看menuPortalTarget道具。高级文档中有一个关于此的主题，特别是提供了一个模态示例。就像是：

  <Select
    {...otherProps}
    menuPortalTarget={document.body} />

Answer 2

您可以通过设置 prop 将菜单位置固定为固定位置，这反过来又使您的下拉菜单位置固定为

<Select menuPosition="fixed" />