Question

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

我正在编写一些前端代码，并且我已经创建了一个带有material-ui的leftNav。在创建菜单时，我想我会测试我对javascript的理解并做出反应并努力创作一个函数来创建菜单，而不是一遍又一遍地写入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是最后一个测试用例和AUTOMATICALLY路由，而不是仅在点击时路由。在我看来，我认为每个MenuItem都会有各自的点击事件处理程序，但它们确实如此，但最后一个测试用例总是执行，尽管break。

我通过返回一个匿名函数解决了这个问题，然后根据传递到this的{{1}}上下文的道具进行了一些保护路由。

我要问的是，为什么切换案例会使_routeHandler()事件返回匿名函数？我认为onTapTouch只有在点击onTapTouch时才会触发。

我很难过，并且假设React有一些内部工作方式，我还没有完全理解。

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

欢迎任何反馈。

谢谢

method

Answer 1

在事件处理程序中你应该像这样使用

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

不

onClick={this.yourfunction()}

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

1 个答案: