Bootstrap 使用额外菜单项没有结果时显示空值

vojdkbi0  于 2023-09-28  发布在  Bootstrap
关注(0)|答案(2)|浏览(162)

我有一个Typeahead与自定义菜单使用renderMenu。我在下拉菜单的底部添加了2个自定义菜单项。一个分隔器和一个按钮。
当我不添加额外的项目,并且没有结果时,它显示空标签。当我添加额外的项目时,如果没有结果,它不会显示“空”标签,因为它认为它还有2个项目。
如何调整以反映没有结果但菜单中仍有内容的空值?

  1. renderMenu = (results, menuProps) => {
  2. const { menuFooterButtonOptions } = this.props;
  3. // add all results from query
  4. const items = results.map((result, index) => (
  5. <MenuItem key={index} option={result} position={index}>
  6. {menuProps.renderMenuItemChildren ? menuProps.renderMenuItemChildren(result, this.props, index) : result}
  7. </MenuItem>
  8. ));
  9. // add footerButton if needed
  10. if (menuFooterButtonOptions && menuFooterButtonOptions?.show) {
  11. const button = (
  12. <MenuItem option={{key: "footerButton"}} onClick={(_) => {menuFooterButtonOptions.onClick();}} active={false}>
  13. <span className={"btn-link"}>
  14. {menuFooterButtonOptions.text}
  15. </span>
  16. </MenuItem>
  17. );
  18. items.push(<Menu.Divider />);
  19. items.push(button);
  20. }
  21. return (
  22. <Menu {...menuProps}>
  23. {items}
  24. </Menu>
  25. );
  26. };
mfuanj7w

mfuanj7w1#

我通过在没有项目的时候添加一个空元素来解决它。

  1. if (menuFooterButtonOptions && menuFooterButtonOptions?.show && (items.length < 1)) {
  2. items.push(<MenuItem disabled={true} active={false}><span>No matches found.</span></MenuItem>);
  3. }
ffdz8vbo

ffdz8vbo2#

试试这个如果结果存在则呈现项,如果不存在则呈现空消息。

  1. return (
  2. <Menu {...menuProps}>
  3. {results ? items: <MenuItem disabled={true} active={false}><span>No matches found.</span></MenuItem>}
  4. </Menu>
  5. );

相关问题