我的一个组件中有一个 Material ui 列表。当我单击此列表中的任何项目时，我会转到另一个 ListView 。我正在使用路由器转到另一个 ListView 。并使用 onClick 方法。每当我单击第一个列表的任何列表项时，我都会打印“firstList clicked”。每当我单击第二个列表中的任何项目时，它都会打印“secondList clicked”。
这是我的问题: 当我单击第一个列表的 ListItem 时，console.log(“secondList clicked”) 也会自动打印“firstList Clicked”。我在第二个列表中有四个列表项，所以我的控制台打印输出如下所示
firstList Clicked
secondList Clicked
secondList Clicked
secondList Clicked
secondList Clicked
为什么会发生这种情况？
这是我的代码。
第二个列表代码
class TagListItemDetails extends Component {
handleClick() {
console.log("secondList clicked")
}
handleButtonClick() {
browserHistory.push("TagList")
}
render() {
return (
<MuiThemeProvider>
<div>
<List id="parent-list-tags">
<ListItem primaryText="Kitchen" onTouchTap={this.handleClick()}/>
<ListItem primaryText="Beach" onClick={this.handleClick()}/>
<ListItem primaryText="Marriage" onClick={this.handleClick()}/>
<ListItem primaryText="Garden" onClick={this.handleClick()}/>
</List>
<div className="backButton">
<RaisedButton backgroundColor="#293C8E" label="Back" onClick={this.handleButtonClick} labelColor="white">
</RaisedButton>
</div>
</div>
</MuiThemeProvider>
);
}
}
const mapStateToProps =(state) =>{
return {
tags: state.tagReducer
};
};
function matchDispatchToProps(dispatch){
return bindActionCreators({tagSelected: tagSelected}, dispatch);
}
export default connect(mapStateToProps, matchDispatchToProps)(TagListItemDetails);
第一个列表
export default class TagList extends Component {
handleClicked() {
console.log("firstList Clicked")
browserHistory.push("TagListItemDetails")
}
render() {
return (
<div>
<List id="parent-list-tags" >
<ListItem primaryText="Scene" onClick={this.handleClicked} />
<Divider/>
<ListItem primaryText="Actors" onClick={this.handleClicked} />
<Divider/>
<ListItem primaryText="Emotions" onClick={this.handleClicked} />
<Divider/>
<ListItem primaryText="Actions" onClick={this.handleClicked}/>
<Divider/>
<ListItem primaryText="Objects" onClick={this.handleClicked}/>
<Divider/>
<ListItem primaryText="Compliance" onClick={this.handleClicked} />
</List>
<AddButton />
</div>
)
}
};
最佳答案
问题在于，在 SecondList 中，一旦加载组件，您就会调用 handleClick 方法。尝试从 onClick 处理程序中删除括号 () 。所以而不是
<ListItem primaryText="Beach" onClick={this.handleClick()}/>
您可以使用:
<ListItem primaryText="Beach" onClick={this.handleClick}/>
------------------------------------------------------^^ No parentheses here
将参数传递给作为 prop 传递的点击处理程序的一种方法是使用粗箭头函数:
onClick={() => this.props.itemSelected(2)}
// or if you want to pass the event as well:
onClick={(event) => this.props.itemSelected(2, event)}
此外，这里是如何在 onClick 事件上触发两个函数的演示:http://codepen.io/PiotrBerebecki/pen/YGRQrG
关于reactjs - Material UI List onClick 触发嵌套列表上的 click 事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40139516/