Question

我有一个自定义模态，其中有2个反应选择组件。模态主体准备自动滚动，以防内容超出其大小，但是在发生这种溢出的情况下，模态内部会打开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道具。有一个topic on this in the Advanced documentation，专门提供了一个模态示例。像这样：

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

react-select下拉列表在模式内部打开

1 个答案: