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

Question

First time posting and I'm happy to say I finally have something worth asking! I'm asking to further broaden my understanding of JavaScript & React and I appreciate all feedback.

I'm currently writing some front-end code and I've created a leftNav with material-ui . While creating the menu, I thought i'd test my understanding of javascript and react and made an effort to author a function that'll create the menu instead of having to write in jsx <MenuItem props={}> </MenuItem> over and over again and it was simple and I was quite excited to get it working. This is the render method inside the react component:

    <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() } would create all the MenuItem s I needed and everything seemed perfect until I needed to add click event handlers to each item (obv). It would have been simpler if I'd just stack <MenuItem props={}> </MenuItem> on top of each other in jsx.

I just added a switch menu to test for properties but now onTouchTap={_routeHandler.call(prop)} was executing the last test case and AUTOMATICALLY routing instead of only routing on click. In my mind I figured each MenuItem would have its respective click event handler, and they sort of did, but the last test case was always executed despite the break .

I resolved the issue by returning an anonymous function that then did some guarded routing depending on the prop that was passed into this context of the _routeHandler() .

What I'm asking is, why did it take the switch case to return an anonymous function for the onTapTouch event to work? I figured the onTapTouch would fire only when a MenuItem is clicked.

I am stumped and assume there is some inner workings of React that I yet do not fully understand.

Underneath is the method that creates my menu dynamically.

Any feedback is welcomed.

Thank you

_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
};

Answer 1

in event handler you should use like this

onClick={()=>this.yourfunction()}

not

onClick={this.yourfunction()}