Reactjs 渲染后在元素上添加onClick事件的正确方法是什么？

我只想在列表（数组）的元素上添加onClick事件

---

但是它似乎不起作用。

在

React

中，您可以在组件中单击

onClick

，绑定

。您可以在此处阅读有关事件处理的更多信息：

您的代码可以更改为：

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      list: ['Value1', 'Value2']
    }
  }

  handleClick = e => {
    console.log('You clicked the item!!')
  }

  render() {
    return (
      <div className="App">
        {this.state.list.map(data => {
          return (
            <span onClick={data === 'Value1' ? this.handleClick : undefined}>
              {data}
            </span>
          )
        })}
      </div>
    )
  }
}

类应用程序扩展了React.Component{
构造函数（）{
超级（）
此.state={
列表：['Value1'，'Value2']
}
}
handleClick=e=>{
console.log（'您单击了项目！！'）
}
render（）{
返回(
{this.state.list.map（数据=>{
返回(
{data}
)
})}
)
}
}
为什么要在渲染后执行？已经有这样的应用程序了。它要求我将onClick事件添加到数组列表中的一个元素中。不必在渲染后添加onClick事件，而是可以从一开始就定义它，并根据指示渲染是否已发生的状态变量和单击的数组项的值来决定如何处理该事件。正如@Yossi和Mayank所说，渲染后不需要添加onClick。是的，可以从状态定义它。@Yossi我该怎么做？我只需要在1个元素列表[0]上添加onClick，它是'Value1'，而不是整个列表抱歉。我把问题看得太快了。我将更新我的答案以符合您的要求。谢谢。它解决了我的问题。我只是好奇我们是否按照上面的@Yossi方式“从一开始就定义它，并根据指示渲染是否已经发生的状态变量和单击的数组项的值，在其中决定如何处理事件”。我们怎么做？我想我理解他想说什么，但我不完全同意这个解决方案。我想他说你可以用状态来定义点击哪个项目。如果单击了
Value1
项，则处理添加操作。此解决方案的问题在于，您可以通过将
数据
传递给函数，直接在
handleClick
中执行
if…else…
。它还使您的
handleClick
func执行多个工作，这对维护代码是有害的（在一些我仍在学习的高级编程中）。但也许我理解错了。
const [Value1,Value2] = this.state.list
value1.addEventListener('click',function(){})

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      list: ['Value1', 'Value2']
    }
  }

  handleClick = e => {
    console.log('You clicked the item!!')
  }

  render() {
    return (
      <div className="App">
        {this.state.list.map(data => {
          return (
            <span onClick={data === 'Value1' ? this.handleClick : undefined}>
              {data}
            </span>
          )
        })}
      </div>
    )
  }
}