在 react-bootstrap select 输入中显示选择的 i18next 语言

Question

import React from 'react';
import i18n from "i18next";
import { withTranslation, WithTranslation } from 'react-i18next';
import {Form} from 'react-bootstrap';

interface State {
    language: string;
}

interface Props extends WithTranslation {}

class LanguageSwitcher extends React.Component<WithTranslation, State, Props> {

    constructor(props: Props) {
        super(props);
        this.state = {
            language: 'en'
        };
    }

    changeLang = async (event: any) => {
        i18n.changeLanguage(event.target.value);
        this.setState({...this.state, language: event.target.value});
        await new Promise(r => setTimeout(r, 200));
    }

    render() {
        const { t, i18n } = this.props;
        const getCurrentLng = () => i18n.language || window.localStorage.i18nextLng || '';

        return (
            <div className="tmf-language-switcher">
                <Form>
                    <Form.Group controlId="form-language">
                        <Form.Label>{t('language')}</Form.Label>
                        <Form.Control value={this.state.value} as="select" onChange={this.changeLang.bind(this)} ref="valid_for">
                            <option value="en">{t('English')}</option>
                            <option value="de">{t('German')}</option>
                        </Form.Control>
                    </Form.Group>
                </Form>
            </div>
        );
    }
}

export default withTranslation()(LanguageSwitcher);

我正在使用 react-i18next 和 react-bootstrap 来实现语言切换器。

上面的代码有效，我可以切换语言，但是如果我改变路线再回来，控制选项中没有选择当前语言。

有人能告诉我，如何显示正确的语言默认值吗？

Answer 1

我通过将 getCurrentLng() 作为 value 传递给我的 Form.Control:

解决了这个问题

<Form.Control value={getCurrentLng()} as="select" onChange={this.changeLang.bind(this)}>

在 react-bootstrap select 输入中显示选择的 i18next 语言

Show chosen i18next language in react-bootstrap select input

javascript

reactjs

react-bootstrap

react-i18next