点击GenerateList渲染的div时Console.log()偶发无法打印id

我定义了App和GenerateList两个简单函数，当前遇到的问题是：点击GenerateList渲染出的div时，有时能在Console中打印出该div的id，但大多数情况下打印的是空白值；切换点击另一个不同id的div时首次能打印出id，但再次点击时又会输出空白值。请问这是什么原因？

App组件代码 #

import React from 'react';
import GenerateList from './generate_list';

function App() {

const [notes,SetNotes] = React.useState([{id:1,value:""}]); 

function addNote()
{
  SetNotes(prevItem => {return ([...prevItem,{id:prevItem[prevItem.length-1].id+1,value:""}])})
}

function clicked(event)
{
  console.log(event.target.id);
}

const list = notes.map(item => {return <GenerateList key={item.id} value={item.id} func={clicked} />});

return (
  <div className='container'>
    <div className='sidebar'>
      <button onClick={addNote} >Add</button>
      {list}
    </div>
  </div>
  );
}

export default App;

GenerateList组件代码 #

import React from "react"

export default function GenerateList(props)
{
  return(<div  onClick={props.func} className="note_row" id={props.value}>
    <h3>Note {props.value}</h3>
  </div>)
}

问题原因与解决办法 #

原因 #

问题出在event.target的特性上：target指的是实际被点击的DOM元素，而不是绑定事件的那个元素。

你的点击事件绑定在外层div上，但div内部还有一个<h3>标签。当你点击h3区域时，event.target就是这个h3标签——它没有设置id，所以打印出来是空值；只有当你点击到div的空白区域（没有覆盖h3的部分）时，target才是带id的div，这时才能输出正确的id。

解决办法 #

有两种简单的修复方式：

方式一：用event.currentTarget代替event.target

currentTarget永远指向绑定了事件处理函数的DOM元素（也就是你设置了id的外层div），不管你点击的是它的哪个子元素。修改clicked函数即可：

function clicked(event)
{
  console.log(event.currentTarget.id);
}

方式二：直接传递id参数（更推荐）

不用依赖事件对象，直接把id作为参数传给点击函数，逻辑更清晰：

1. 修改App组件里的clicked函数，让它接收id参数：

function clicked(noteId)
{
  console.log(noteId);
}

2. 渲染GenerateList时，通过箭头函数把id传进去：

const list = notes.map(item => {
  return <GenerateList key={item.id} value={item.id} func={() => clicked(item.id)} />
});

3. GenerateList组件里的onClick直接调用props.func即可（无需改动原有结构）。

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