react从ReactDOM.render调用一个函数

Question

在我的index.js文件中，我有这个：

const store = createStore(
    combineReducers({
        i18n: i18nReducer
    }),
    applyMiddleware(thunk)
);
syncTranslationWithStore(store)
store.dispatch(loadTranslations(translationsObject));
store.dispatch(setLocale('de'));

使用此代码，默认语言设置为greman。 现在，我想在ReactDOM.render中创建一个Button，最多可以用stahet（de / en）来更改语言。

我所做的是这样的：

function changeLanguage() {
    function handleClick(e) {
        e.preventDefault();
        store.dispatch(setLocale('de'));
    }
}

和在ReactDOM中

 <Router history={hashHistory}>
        <div>
            <div className="sidebararound">
                <div className="sidebar">
                    <ul>
                        <li><a className="fa fa-language fa-2x" onClick={this.changeLanguage.handleClick.bind()} aria-hidden="true"></a></li>

但是那是行不通的。 我有一张白纸。 我的错误在哪里？

谢谢

Answer 1

在构造函数中绑定事件始终是一个好习惯。

constructor(props) {
   super(props);
   this.handleClick = this.handleClick.bind(this)
   ....
}

handleClick(e){
  e.preventDefault();
  store.dispatch(setLocale('de'));
}

并在render方法中：

<Router history={hashHistory}>
        <div>
            <div className="sidebararound">
                <div className="sidebar">
                    <ul>
                        <li><a className="fa fa-language fa-2x" onClick={this.handleClick} aria-hidden="true"></a></li>