React JS：如果下面没有空格，React 选择下拉位置到顶部

Question

我正在使用React Select

我希望它的下拉位置是动态的。假设它下面没有空格，那么下拉菜单应该打开到上面的选择框。

<Select
  value={selectedOption}
  onChange={this.handleChange}
  options={options}
/>

是否有任何选项可以使下拉位置动态？

任何帮助都会很棒。

谢谢你。

Answer 1

<Select
  menuPlacement="top"
  ...
/>

您可以使用menuPlacementprop top，bottom或者auto

Answer 2

您可以menuPlacement在 Select 组件上使用“底部”（默认）、“顶部”或“自动”选项。

你可以在这里看到其他道具;)

Answer 3

<Select menuPortalTarget={document.body} menuPosition={'fixed'} />

经过几个小时的寻找解决方案。这对我来说非常有效。

Answer 4

内部组件：

render() {
    const className = this.state.dropUp ? 'drop-up' : '';

    return (
      <Select {...this.props} className={className} />
    );
  }

并在 css 文件中：

.drop-up .Select-menu-outer {
  top: auto;
  bottom: 100%;
}