Wie legen Sie den ausgewählten Artikel in Dropdown-reactstrap?
Festlegen ausgewählten Elements in der Dropdown-reactstrap?
Es ist ein Beispiel für dropdown: https://reactstrap.github.io/components/dropdowns/
Wenn ich wählen Sie Element in der dropdown-Box wird nicht angezeigt.
*******************Funktionierende Lösung*****************************
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;
Du musst angemeldet sein, um einen Kommentar abzugeben.
Fügen Sie einen onclick auf Ihre DropDownItem (innerhalb eines div ?) ändern Sie Ihren Zustand. Eine "dropDownValue" von deinem click-Ereignis.
In Ihrem dropDownToggle, bekommen Sie Ihren Staat.dropDownValue.
Etwas wie dieses :
Natürlich, vergessen Sie nicht, init und binden Sie die Funktion für Ihre Arbeit.
Ähnlich wie @Nevosis Lösung, können Sie ein value-Attribut und Holen es anschließend auf den "onChange" - Ereignis: