React中onClick触发toggleActive返回SyntheticBaseEvent无法获取element变量问题

问题原因 #

你在同一个div元素上重复写了两次onClick属性，这是导致问题的核心诱因：

• JSX规则里，同一个元素的同名属性，后声明的会直接覆盖前面的声明
• 如果绑定事件时没有主动传入自定义参数、或者没有用函数包裹触发逻辑，React会默认把内部的合成事件对象SyntheticBaseEvent作为第一个参数传给触发的函数，这就是你拿到事件对象而非预期element的原因。

解决方案 #

删掉重复的onClick属性，仅保留一个正确传递参数的绑定即可，有两种常用的合法写法：

1. 箭头函数包裹（更推荐，可读性更强）

toggleActive (newDate) {
    this.props.changeData(this.state.dateType, newDate)
}

{this.state.list.map((element, index) => {
      return <div 
        onClick={() => this.toggleActive(element)} 
        className="list-item text-truncate text-center" 
        key={`${element}.${index}`}
      >{element}</div>
})}

this.state.list = [0, 1, 2, 3, 4, 5, 6, ...]

2. 使用bind方法预绑定参数

<div 
  onClick={this.toggleActive.bind(this, element)} 
  className="list-item text-truncate text-center" 
  key={`${element}.${index}`}
>{element}</div>

两种写法都可以保证点击触发时，toggleActive接收到的第一个参数是当前遍历得到的element值。

内容的提问来源于stack exchange，提问作者henrikhannewijk