我使用 reactstrap 做了一个下拉并且工作正常,但现在我试图将 react-18next 的值设置为我的状态,作为 dropDownValue 的值。i18n 在我的渲染中工作正常,但我无法在我的状态中访问它的值.. 有什么想法吗?这是我的代码。先感谢您!
dropdownd.jsx:
import React, { PureComponent } from 'react';
import {
DropdownItem,
DropdownToggle,
DropdownMenu,
UncontrolledDropdown,
} from 'reactstrap';
import { withTranslation } from 'react-i18next';
import PropTypes from 'prop-types';
class TopbarNavDashboards extends PureComponent {
state = {
dropDownValue: 'Home', // this must be {t('app.home')}
dropdownOpen: false,
};
static propTypes = {
t: PropTypes.func.isRequired,
};
toggle = () => {
const { dropdownOpen } = this.state;
this.setState({
dropdownOpen: !dropdownOpen,
});
};
changeValue = (e) => {
this.setState({ dropDownValue: e.currentTarget.textContent });
};
render() {
const { t } = this.props;
const { dropdownOpen, dropDownValue } = this.state;
return (
<UncontrolledDropdown
isOpen={dropdownOpen}
toggle={this.toggle}
className="topbar__nav-dropdown"
>
<DropdownToggle className="topbar__nav-dropdown-toggle">
{dropDownValue} <MenuSwapIcon />
</DropdownToggle>
<DropdownMenu className="topbar__nav-dropdown-menu dropdown__menu">
<DropdownItem onClick={this.changeValue}>
<TopbarNavLink route="/home" title={t('app.home')}/>
</DropdownItem>
<DropdownItem onClick={this.changeValue}>
<TopbarNavLink route="/github" title={t('app.github')} />
</DropdownItem>
<DropdownItem onClick={this.changeValue}>
<TopbarNavLink route="/proyects" title={t('app.proyects')} />
</DropdownItem>
</UncontrolledDropdown>
);
}
}
export default withTranslation('common')(TopbarNavDashboards);