React中e.currentTarget.dataset.id获取li索引返回undefined问题排查

首先，咱们先分析为什么e.currentTarget.dataset.id会返回undefined：

可能的原因 #

1. 事件触发元素的隐性混淆：虽然你把onClick绑定在<li>上，但如果点击的是<li>内部的<span>或<p>，e.target会是这些子元素，但e.currentTarget理论上应该始终是绑定事件的<li>——不过你可以先在控制台打印e.currentTarget确认，看看是不是真的指向<li>元素。
2. React合成事件的对象回收：如果在异步操作里访问e.currentTarget，React会回收合成事件对象导致属性丢失，但你是同步console.log，这个可能性极低。
3. DOM属性解析的小坑：虽然data-id="1"的写法是标准的，但极少数情况下，某些React版本或第三方工具可能对属性解析有偏差，不过这个概率也很小。

更可靠的解决方案 #

其实不用依赖dataset，直接在绑定事件时传递索引是更简单且不易出错的方式：

方法1：通过bind传递索引

修改<li>的事件绑定，把索引作为参数传入：

<li onClick={this.handleCheck.bind(this, 1)}><span>A</span> <p>{this.props.answers[0]}</p></li>

然后修改handleCheck函数，先接收索引参数：

handleCheck(index, e) {
  console.log(index); // 直接拿到你要的索引值
}

方法2：通过箭头函数传递索引

如果觉得bind写法麻烦，也可以用箭头函数：

<li onClick={(e) => this.handleCheck(e, 1)}><span>A</span> <p>{this.props.answers[0]}</p></li>

对应的handleCheck：

handleCheck(e, index) {
  console.log(index);
}

方法3：修复dataset的使用（如果一定要用）

先在handleCheck里打印元素确认：

handleCheck(e) {
  console.log(e.currentTarget); // 检查是不是<li>元素，有没有data-id属性
  console.log(e.currentTarget.getAttribute('data-id')); // 用getAttribute直接获取，比dataset更直接
}

如果确认<li>有data-id但dataset.id仍为undefined，可以试试把JSX里的data-id改成驼峰式的dataId：

<li onClick={this.handleCheck.bind(this)} dataId="1"><span>A</span> <p>{this.props.answers[0]}</p></li>

再用e.currentTarget.dataset.id获取，结果是一致的。

总结 #

推荐用方法1或方法2传递索引，不仅避免了DOM属性依赖，代码可读性也更高——尤其是当你需要循环渲染<li>的时候（比如this.props.answers.map((item, index) => <li onClick={this.handleCheck.bind(this, index)}>...</li>)），直接用循环的索引参数就行，非常方便。

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