Question

我有一个功能，可以遍历标签列表。我有一个调用函数的onClick事件。此函数将clicked的状态设置为循环中单击的项目的ID的状态。该功能还可以显示console.log的状态。

它正在记录clicked的状态8次。我的循环中当前有4个项目。

如何做到这一点，以便每次用户单击列表中的项目时都可以将状态设置为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})
    )
  }

Answer 1

您为每个元素调用函数，如下设置函数：

changeView = id => ev => this.setState({clicked: id});

Answer 2

像这样删除onPress并在onClick中添加箭头功能

onClick={()=>this.changeView(link.id)}

希望这会有所帮助

如何在点击事件中仅在循环内设置一次setState？

2 个答案: