如何在 reactstrap 下拉菜单中设置所选项目？

Posted 2023-02-23

【中文标题】如何在 reactstrap 下拉菜单中设置所选项目？

【英文标题】：How to set selected item in reactstrap Dropdown?

【发布时间】：2017-11-05 23:09:28

【问题描述】：

如何在 reactstrap 下拉菜单中设置选中项？

有下拉示例：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;

【参考方案1】：

在您的 DropDownItem 上添加一个 onclick（在 div 内？）以更改您的状态。从您的点击事件中设置一个“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 工作。

【讨论】：

我将 id 添加到 DropdownItem 以获取所选菜单项的 id。

【参考方案2】：

类似于@Nevosis 解决方案，您可以添加一个值属性，然后在“onChange”事件中获取它：

    onDropdownItem_Click = (sender) => 
    var icon = sender.currentTarget.querySelector("i");
    var newState = 
      dropDownValue: sender.currentTarget.getAttribute("dropdownvalue"),
      dropDownIcon: !!icon && icon.getAttribute("class")
    ;

    this.setState(newState);
    if (!!this.props.onChange) 
      this.props.onChange(newState.dropDownValue);
        


  render = () => (
    <Dropdown isOpen=this.state.dropDownOpen toggle=this.toggle className='ticket-module-selector ' + this.props.className>
      <DropdownToggle color=this.props.color caret>
        <i className=this.state.dropDownIcon></i>this.state.dropDownValue
      </DropdownToggle>
      <DropdownMenu>
        <DropdownItem onClick=this.onDropdownItem_Click dropDownValue="Allotments"><i className="fa fa-plane fa-fw"></i>Allotments</DropdownItem>
        <DropdownItem onClick=this.onDropdownItem_Click dropDownValue="GeoAMS"><i className="fa fa-envelope fa-fw"></i>GeoAMS</DropdownItem>
        <DropdownItem onClick=this.onDropdownItem_Click dropDownValue="QIS"><i className="fa fa-money fa-fw"></i>BSP</DropdownItem>
        <DropdownItem onClick=this.onDropdownItem_Click dropDownValue="QIS"><i className="fa fa-clock-o fa-fw"></i>QIS</DropdownItem>
        <DropdownItem onClick=this.onDropdownItem_Click dropDownValue="NO_SHOW"><i className="fa fa-car fa-fw"></i>NO SHOW</DropdownItem>
      </DropdownMenu>
    </Dropdown>

【讨论】：

此方法将 onClick 分配给 Dropdown 组件在 html 中创建的按钮，因此支持键盘导航。我认为这是正确的解决方案。

我在这里试过这个。没用：***.com/questions/60435037/…

【参考方案3】：

这是一个完整的工作代码示例，可能会对您有所帮助。 使用导入：

import  ButtonDropdown, DropdownItem, DropdownMenu, DropdownToggle, Dropdown  from "reactstrap"

方法：

state = 
   currency: '',
   dropDownOpen: '',


toggle = () => 
    this.setState(
       dropDownOpen: !this.state.dropDownOpen,
    )


handleChange = (code) => 
    this.setState(
        currency: code
    )

里面

render()
return(
    <ButtonDropdown >
        <Dropdown isOpen=this.state.dropDownOpen toggle=this.toggle >
            <DropdownToggle color="primary" caret className="dropdown-toggle">
                Select Currency
            </DropdownToggle>
            <DropdownMenu className="currency-dropdown">
                    <DropdownItem onClick=() => this.handleChange(USD) dropDownValue="USD">USD</DropdownItem>
                    <DropdownItem onClick=() => this.handleChange(EUR) dropDownValue="EUR">EUR</DropdownItem>
                    <DropdownItem onClick=() => this.handleChange(INR) dropDownValue="INR">INR</DropdownItem>
                    <DropdownItem onClick=() => this.handleChange(AFT) dropDownValue="AFT">AFT</DropdownItem>
                </DropdownMenu>
            </Dropdown>
        </ButtonDropdown>
)

您可以更新 CSS：

.dropdown-toggle 
    margin-top: 36px;
    min-width: 300px;
    background-color: white;
    color: darkslategrey;


.currency-dropdown 
    max-height: 350px;
    overflow-y: scroll;
    min-width: 300px;

当您使用this.state.currency 时，您将获得选定的值