change lang in code

[ruanzy]

var langButton = React.createClass({ render: function () { return ( <button onClick={this.handleClick} >click</button> ) }, handleClick: function (event) { //How to change lang page's <FormattedMessage/> change auto } });

[ericf]

By treating the current locale as application state.

Maybe something like this…

import React from 'react';
import ReactDOM from 'react-dom';
import {IntlProvider, FormattedMessage} from 'react-intl';

const messages = {
    'en': {
        'greeting': 'Hello',
    }

    'fr': {
        'greeting': 'Bonjour',
    }
};

class Root extends React.Component {
    constrcutor(props) {
        super(props);

        this.state = {
            locale: props.initialLocale,
        };

        this.updateLocale = this.updateLocale.bind(this);
    }

    updateLocale(locale) {
        this.setState({locale});
    }

    render() {
        const {locale} = this.state;

        return (
            <IntlProvider
                locale={locale}
                messages={messages[locale]}
            >
                <App updateLocale={this.updateLocale} />
            </IntlProvider>
        );
    }
}

Root.propTypes = {
    initialLocale: React.PropTypes.string.isRequired,
};

Root.defaultProps = {
    initialLocale: 'en',
};

const App = ({updateLocale}) => (
    <div>
        <p>
            <FormattedMessage id='greeting' />
        </p>
        <ul>
            <li>
                <a 
                    href="#" 
                    onClick={(e) => {
                        e.preventDefault();
                        updateLocale('fr');
                    }}
                >
                    French
                </a>
            </li>
            <li>
                <a 
                    href="#" 
                    onClick={(e) => {
                        e.preventDefault();
                        updateLocale('en');
                    }}
                >
                    English
                </a>
            </li>
        </ul>
    </div>
);

App.propTypes = {
    updateLocale: React.PropTypes.func.isRequired,
};

ReactDOM.render(
    <Root />,
    document.getElementsById('container')
);