Some issue with javascript bind

LeftNavBar.jsx

import React from 'react';
import MenuItem from 'material-ui/lib/menus/menu-item';

class LeftNavBar extends React.Component {

  constructor(props) {
    super(props);
    // this.onMenuListTap = this.onMenuListTap.bind(this);
    this.state = {
      menuItems: [
        { route: 'list', text: 'List' },
        { route: 'about', text: 'About someone' },
        { route: 'redux', text: 'Redux page' },
        { route: 'not', text: '404 page' },
      ],
    };
  }

  onMenuListTap(route) {
    const { history } = this.context;
    history.pushState(null, `/${route}`);
    this.setState({ open: !this.state.open });
  }

  render() {
    const menuLists = this.state.menuItems.map((data, index) => {
      return (
        <MenuItem
          key = {index}
          onTouchTap={this.onMenuListTap.bind(this, data.route)}
          // onTouchTap={this.onMenuListTap(data.route)}
          primaryText={data.text}
        />);
    });

    return (
      <div>{menuLists}</div>
    );
  }

}
module.exports = LeftNavBar;