提问人：Ozge Cokyasar 提问时间：5/18/2019 最后编辑：Ozge Cokyasar 更新时间：5/18/2019 访问量：677
如何在点击事件上设置状态，在一个循环中只设置一次？
How to setState on click event, only once within a loop?
问：
我有一个函数，我正在循环浏览标签列表。
我有一个 onClick 事件，我正在调用一个函数。
此函数将状态设置为循环中单击项的 ID 的状态。该函数还控制台 .log 的状态。clicked
它记录了 8 次的状态。我的循环中当前有 4 个项目。clicked
我怎样才能使它能够将状态设置为用户每次单击列表中的某个项目时？clicked
这是我的循环：
{
filteredArray.map(link => {
return (
<div
key={link.id}
role="button"
style={{paddingBottom: 20}}
onClick={this.changeView(link.id)}
onKeyPress={this.changeView(link.id)}
tabIndex={0}
>
<Paragraph size="large">
<a className='heading__dropdown__link'
{link.label}
</a>
</Paragraph>
</div>
)
})
}
这是我的功能：changeView
changeView(id) {
const { clicked } = this.state
console.log(clicked)
return (
() => this.setState({clicked: id})
)
}
答：
0赞
Miroslav Glamuzina
5/18/2019
#1
你为每个元素调用函数，像这样设置你的函数：
changeView = id => ev => this.setState({clicked: id});
0赞
Tahir Iqbal
5/18/2019
#2
删除 onPress 并添加箭头功能，如下所示onClick
onClick={()=>this.changeView(link.id)}
希望这会有所帮助
评论
changeViewonClick={this.changeView(link.id)} onKeyPress={this.changeView(link.id)}changeView正在返回一个函数，因此只有在您单击或按下某个键时才会更新状态console.logchangeViewchangeView(id) { return () => this.setState(state => {console.log(state.clicked); return {clicked: id};}); }