2

我使用 Material-UI lib 文档中的示例自动完成字段。（https://material-ui.com/demos/autocomplete/#react-select）

在页面底部或浏览器视口打开时，翻转菜单会出现问题。

有没有办法用 Material-UI 和 react-select 解决这个问题？还是我需要写一些自定义的东西？

4

3 回答 3

6

如果你没有使用<Menu/>自定义组件，你可以使用 的menuPlacement="auto"道具<Select/>，那么你的问题就解决了。

const components = {
  Control,
  // Menu , <-- delete it
  NoOptionsMessage,
  Option,
  Placeholder,
  SingleValue,
  ValueContainer
};

https://github.com/JedWatson/react-select/issues/403

否则你可以选择另一个选择器，material-ui 提供了另外 2 个与组件的不同集成<Popper/>：react-autosuggest 和 downshift。

https://material-ui.com/demos/autocomplete/

希望能帮助到你！

于 2019-05-10T15:45:17.643 回答
1

我遇到了同样的问题，对于<Select />组件我使用了 TomLgls 的建议，但<AsyncSelect />作为一种解决方法，我在组件中使用了一些偏移计算：

const rootHeight =  document.getElementById('root').offsetHeight ;
const selectElement = document.getElementById('async_select_container_id');
const selectOffsetBottom=  selectElement.offsetHeight  + selectElement.offsetTop;
...
<AsyncSelect 
  {...listProps}
  menuPlacement={
      rootHeight - selectOffsetBottom > 210 ? 'auto' : 'top'  // react-select menu height is 200px in my case
  }
/>

我希望它也有帮助

于 2020-07-29T14:59:00.530 回答
0

如果您已经创建了 customMenu 组件，那么在其中将 className 设置为 open-menu-top 并为类编写以下代码：

.menu-open-top {
  top: auto;
  bottom: 100%;
}

您的 CustomMenu 可能如下所示：

const CustomMenu = ({ children, innerProps, innerRef, selectProps }) => {
      return (
        <div
          ref={innerRef}
          {...innerProps}
          
          className={`rs-menu ${customMenuClass} open-menu-top`}
        >
         {Your Logic}
        </div>
      );
    };

于 2021-11-24T12:02:50.167 回答