【发布时间】：2017-03-01 13:45:39
【问题描述】：
我的一个组件中有一个材质 ui 列表。当我单击此列表的任何项目时，我会转到另一个 listView。我正在使用路由器去另一个listView。并使用 onClick 方法。每当我单击第一个列表的任何列表项时，我都会打印“firstList clicked”。并且每当我点击第二个列表中的任何项目时，它都会打印“secondList clicked”。
这是我的问题： 当我单击第一个列表的 ListItem 时，console.log("secondList clicked") 也会自动打印“firstList Clicked”。我在第二个列表中有四个列表项，所以我的控制台打印输出如下所示
第一个点击列表
secondList 点击
secondList 点击
secondList 点击
secondList 点击了
为什么会这样？
这是我的代码。
SecondList 代码
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 处理程序中删除括号
()：onClick={this.handleClick} -
成功了。但是，如果我想在 secondList 中用我的动作作为道具做一些事情，就像这样： onClick={this.props.itemSelected(2)} 。其中 itemSelected 是动作函数，2 是我传递的参数。我这里说的是 react-redux。
-
作为一个快速修复，您应该能够使用像这样的粗箭头函数：
onClick={() => this.props.itemSelected(2)}让我知道它是否有效。这是一个演示：codepen.io/PiotrBerebecki/pen/YGRQrG -
当我尝试执行 onClick={this.props.itemSelected(2)} 时，它给了我这个错误：在现有状态转换期间无法更新（例如在渲染或其他组件的构造函数中） .渲染方法应该是 props 和 state 的纯函数；构造函数的副作用是一种反模式，但可以移动到 componentWillMount。
-
如果你使用
onClick={() => this.props.itemSelected(2)}，你会得到这个错误吗？你不应该使用onClick={this.props.itemSelected(2)}。
标签： reactjs react-router react-redux material-ui