在使用 react 和 material-ui 动态创建菜单项时，为什么 onTouchStart 会自动执行功能

第一次发帖，我很高兴地说我终于有值得问的东西了！我要求进一步拓宽我对JavaScript React的理解，我感谢所有的反馈。

我目前正在编写一些前端代码，并且已经创建了一个带有material-ui的leftNav。在创建菜单时，我想我会测试我对 javascript 和 react 的理解，并努力编写一个函数来创建菜单，而不必一遍又一遍地用 jsx <MenuItem props={}> </MenuItem>编写，这很简单，我很高兴能让它工作。这是 react 组件内部的render方法：

    <LeftNav className={'animated ' + this.state.animation}
                     open={this.props.open}
                     style={style.leftNav}
                     width={220}
                     key={0}>
                <Card style={style.card}>
                    <CardHeader avatar={null}
                                style={style.cardHeader}
                                zDepth={2}>
                        <Avatar size={65}
                                style={style.avatar}
                                src={avatarUrl}
                                onClick={ this._handleOpenSnackbar}/>
                    </CardHeader>
                </Card>
                <br/>
                {this._createMenu() }
            </LeftNav>

{this._createMenu() }将创建我需要的所有MenuItem，一切似乎都很完美，直到我需要为每个项目 （obv） 添加点击事件处理程序。如果我在 jsx 中<MenuItem props={}> </MenuItem>堆叠在一起会更简单。

我刚刚添加了一个开关菜单来测试属性，但现在 onTouchTap={_routeHandler.call(prop)} executing最后一个测试用例并自动路由，而不仅仅是单击时路由。在我看来，我认为每个MenuItem都有自己的点击事件处理程序，它们确实如此，但是尽管break，但最后一个测试用例总是被执行。

我通过返回一个匿名函数解决了这个问题，然后该函数根据传递到_routeHandler()上下文中的 prop 执行this

我要问的是，为什么需要开关大小写来返回一个匿名函数才能使onTapTouch事件正常工作？我认为 onTapTouch 只有在单击MenuItem时才会触发。

我很困惑，并假设 React 的一些内部工作原理我还没有完全理解。

下面是动态创建菜单的method。

欢迎任何反馈。

谢谢

_createMenu = () => {
    let menuOptionsAndIcons = {
            'About me': <i className="fa fa-male" style={style.icons}/>,
            'Skills': <i className="fa fa-certificate" style={style.icons}/>,
            'Music': <i className="fa fa-music" style={style.icons}/>,
            'Interests': <i className="fa fa-cogs" style={style.icons}/>
        },
        menu = [];
    function _routeHandler() {
        switch (this) {
            case 'About me':
                return function () {
                    if (typeof window !== 'undefined')
                        window.location.href = '' + 'http://' + window.location.host + '/about_me';
                };
                break;
            case 'Skills':
                return function () {
                    if (typeof window !== 'undefined')
                        window.location.href = '' + 'http://' + window.location.host + '/skills';
                };
                break;
            case 'Music':
                return function () {
                    if (typeof window !== 'undefined')
                        window.location.href = '' + 'http://' + window.location.host + '/music';
                };
                break;
            case 'Interests':
                return function () {
                    if (typeof window !== 'undefined')
                        window.location.href = '' + 'http://' + window.location.host + '/interests';
                };
                break;
            default:
                break;
        }
    }
    for (var prop in menuOptionsAndIcons) {
        if (menuOptionsAndIcons.hasOwnProperty(prop)) {
            menu.push(<MenuItem leftIcon={menuOptionsAndIcons[prop]}
                                primaryText={ prop }
                                style={style.menuItem}
                                onTouchTap={_routeHandler.call(prop)}
                                key={prop}
                                rippleColor={"#FFFAE8"}
                                className="animated fadeInLeft"/>)
         }
     }
    return menu
};