时间戳

首页 > 解决方案 > 如何创建一个带有查看更多选项的下拉按钮，并且单击切换不应该在反应 js 中发生？

javascript - 如何创建一个带有查看更多选项的下拉按钮，并且单击切换不应该在反应 js 中发生？

问题描述

我想添加查看更多选项来获取数据

import React, { useState } from 'react';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';

const Example = (props) => {
  const [dropdownOpen, setDropdownOpen] = useState(false);

  const toggle = () => setDropdownOpen(prevState => !prevState);

  return (
    <Dropdown isOpen={dropdownOpen} toggle={toggle}>
      <DropdownToggle caret>
        Dropdown
        </DropdownToggle>
      <DropdownMenu>
        <DropdownItem header>Header</DropdownItem>
        <DropdownItem>Some Action</DropdownItem>
        <DropdownItem>Some Action</DropdownItem>
        <DropdownItem onClick={(e) => {this.showAllData(e)} }>See Action</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  );
}

export default Example;

我只想在不关闭下拉菜单的情况下点击下拉项目获取更多数据，任何人都可以提供解决方案来解决这个问题。

标签： javascripthtmlreactjsdrop-down-menudropdown

解决方案

只需为下拉项保留toggle={false}

<DropdownItem toggle={false} onClick={(e) => {this.showAllData(e)} }>See Action</DropdownItem>

推荐阅读