如何在reactstrap Dropdown中设置所选项目?

2024-02-02

如何在reactstrap Dropdown中设置所选项目?

有一个下拉示例:https://reactstrap.github.io/components/dropdowns/ https://reactstrap.github.io/components/dropdowns/

当我在下拉列表中选择项目时,它不会显示。

******************工作解决方案********************************

import React from "react";
import {ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle} from "reactstrap";
import superagent from "superagent";

class BootstrapSelect extends React.Component {

    constructor(props) {
        super(props);

        this.toggle = this.toggle.bind(this);
        this.changeValue = this.changeValue.bind(this);
        this.state = {
            actions: [],
            dropDownValue: 'Select action',
            dropdownOpen: false
        };
    }

    toggle(event) {

        this.setState({
            dropdownOpen: !this.state.dropdownOpen
        });
    }

    changeValue(e) {
        this.setState({dropDownValue: e.currentTarget.textContent});
        let id = e.currentTarget.getAttribute("id");
        console.log(id);
    }


    componentDidMount() {
        superagent
            .get('/getActions')
            .type('application/json; charset=utf-8')
            .end(function (err, res) {
                console.log(res.body);
                this.setState({actions: res.body});
            }.bind(this));

    }

    render() {
        return (
            <ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
                <DropdownToggle caret>
                    {this.state.dropDownValue}
                </DropdownToggle>
                <DropdownMenu>
                    {this.state.actions.map(e => {
                        return <DropdownItem id={e.id} key={e.id} onClick={this.changeValue}>{e.name}</DropdownItem>
                    })}
                </DropdownMenu>

            </ButtonDropdown>
        );
    }

}

export default BootstrapSelect;

在 DropDownItem(在 div 内?)上添加 onclick 来更改状态。从您的点击事件中设置“dropDownValue”。 在 dropDownToggle 中,获取 state.dropDownValue。

像这样的东西:

changeValue(e) {
  this.setState({dropDownValue: e.currentTarget.textContent})
}

<DropdownToggle caret>
    {this.state.dropDownValue}
</DropdownToggle>
<DropdownItem>
    <div onClick={this.changeValue}>Another Action</div>
</DropdownItem>

当然,不要忘记初始化它并绑定函数以使 this 工作。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在reactstrap Dropdown中设置所选项目? 的相关文章

随机推荐

  • 如何使用 VBA 编辑电源查询的源?

    我正在尝试使用 VBA 编辑我的查询之一的源 这是我到目前为止所拥有的 Dim mFormula As String mFormula let Source Excel Workbook File Contents wbname null
  • 使用 d3 或 cytoscape 渲染家谱

    我在用 Javascript 生成漂亮的家谱时遇到问题 要求 每个孩子应该连接到树中的两个父母 而不是像某些图中的一个 我希望配偶在树上彼此相邻 相同的垂直位置 我想把节点按世代垂直组织起来 这样你就能一目了然地看到同一年代出生的人 随着时
  • 没有 (Show (Double -> Double)) 的实例

    我有以下代码 它使用牛顿法来近似某个数字的平方根 问题是当我运行它时 我收到错误 出了什么问题 我该如何解决 newtonRootSequence Double gt Double newtonRootSequence d newtonSe
  • Google 地图地理编码 API 速率限制不正确

    我正在向我公司使用的内部工具之一添加映射功能 长话短说 我们有大约 50 个需要放置在地图上的地址的列表 我使用 Google 地图 使其成为交互式地图 然后使用 javascript API 进行地理编码和添加标记 根据谷歌的文档 htt
  • 包含 对于带有 hashbang 的页面有害吗?

    谷歌关于这个元标签的说法是 以下重要限制适用 元标记只能出现在没有哈希片段的页面中 仅有的 可能会出现在内容字段中 元标记必须出现在文档的头部 Source https developers google com webmasters aj
  • 将字符串转换为列表。 Python [string.split() 表现得很奇怪]

    temp a b c print type temp string output a b c print type output list 所以我有这个临时字符串 它基本上是字符串格式的列表 我正在尝试将其转回列表 但我不确定有什么简单的方
  • DRF SerializerMethodField如何传递参数

    有没有办法将参数传递给 Django Rest Framework SerializerMethodField 假设我有模型 class Owner models Model name models CharField max length
  • 如何指定样式表在文档中出现的顺序?

    我有几个样式组件 使用withStylesHOC 来导出它们 但我无法覆盖某些规则 因为 jss 将 mui 样式表的顺序与我的组件的样式表混合在一起 如何才能将自己的风格坚持到底 我和我的团队也偶然发现了这个问题 并设法找到了解决方案 显
  • 运算符的优先级和结合性是什么?

    C 中运算符的优先级和结合性是什么 谁定义了运算符优先级和结合性 以及它与求值顺序有何关系 https stackoverflow com q 20767745 5740428解释了这些属性如何从语法中出现 然而 我只是对所有规则的列表感兴
  • 在 Matlab 中使用“spy”为不同的数字获取不同的颜色

    当我使用间谍检查稀疏模式时 它不会将某些元素与其他元素区分开 有什么办法可以做到这一点吗 例如 假设元素等于10是红色的并且所有元素都等于9是蓝色的 我可以把这个合而为一吗spy plot 我只能更改情节的大小和样式 您可以这样做 spy
  • 为什么 chromecast 客户端向接收器应用程序声明其高度和宽度为 720p?

    为什么 chromecast 向接收方应用服务器声明其客户端高度和宽度为 720p 我正在尝试显示非视频内容 并假设我能够使用完整的 1080p 分辨率 设备向电视报告其分辨率为 1080p 60hz 但如果您查看设备上的开发人员工具 它仅
  • Angular 与 ui.bootstrap 渲染空白页面

    我使用 Yeoman 创建了一个包含 bootstrap 的 Angular 应用程序 然后 我使用 Bower 按照自述文件中的说明安装 ui bootstraphttps github com angular ui bootstrap
  • 请介绍一个 Perl 或 Ruby 的多处理库

    在Python中我们可以使用多处理模块 如果 Perl 和 Ruby 中有类似的库 你会教它吗 如果您能提供一个简短的示例 我将不胜感激 Ruby 在 Ruby 中使用多个进程 https stackoverflow com questio
  • Ios NSDictionary 数组 - 对值和键进行分组

    我有以下结果NSDictionary数组的 Bath Keynsham nsham companies Bath Midsomer Norton Keynsham companies Bath Norton Radstock Keynsha
  • 在 IIS 中托管时出现 WCF“基本”传输安全问题

    我正在尝试使用 HTTPS SSL 基本客户端凭据和WebHttp绑定 http msdn microsoft com en us library system servicemodel webhttpbinding aspx 通过在线阅读
  • 如何消除该模板的歧义?

    我有一个类 它采用大小作为模板参数 现场演示 http ideone com uPRNZH template
  • 从 URL 获取外部页面的源 DOM/HTML

    我想从 Chrome 扩展程序中的 url 下载页面的源代码 我有这样的东西 但不知道如何将文本格式化为html 或者 如果这种格式有效 如何在控制台中显示源代码 fetch https www transfermarkt com robe
  • C++ 中的虚方法调用是如何工作的?

    如何虚拟方法调用在 C 中工作 通过虚拟表 读这篇文章 http en wikipedia org wiki Virtual table http en wikipedia org wiki Virtual table 我可以在这里解释 但
  • 将参数传递给 Asynctask

    我正在使用异步任务从菜单活动中获取字符串并加载一些东西 但我是 无法这样做 我是否以正确的方式使用它并且我是否正确传递参数 请查看代码片段 谢谢 private class Setup extends AsyncTask
  • 如何在reactstrap Dropdown中设置所选项目?

    如何在reactstrap Dropdown中设置所选项目 有一个下拉示例 https reactstrap github io components dropdowns https reactstrap github io compone