如何在reactstrap Dropdown中设置选择的项？

Question

如何在reactstrap Dropdown中设置选定的项？

下拉菜单的示例：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;

- user657009

Answer 1

在您的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>

当然，不要忘记对其进行初始化并绑定函数，以使其正常工作。

- Nevosis

---

我在DropdownItem中添加了id以获取所选菜单项的id。 - user657009

Answer 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>
}

- Héctor Espí Hernández

---

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

我在这里尝试过了，但没有成功：https://stackoverflow.com/questions/60435037/reactstrap-accessing-the-id-of-the-selected-dropdownitem?noredirect=1#comment106912353_60435037 - AG_HIHI

Answer 3

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

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}时，您将获得所选的值

- Abhishek