在相同组件中识别单击的组件

Question

我有一个像这样的反应组件：

<ul>
<li><div><svg><path></path></svg></div><span>Text 1</span></li>
<li><div><svg><path></path></svg></div><span>Text 2</span></li>
<li><div><svg><path></path></svg></div><span>Text 3</span></li>
</ul>  

我想要的是，当我点击时，我可以获得<li>元素，但当我尝试e.targer时，我从不同的点击区域获得<span>,<path>,<div>和<li>。那么我该怎么做才能得到<li>元素呢。

Answer 1

我认为将事件侦听器添加到li元素中会起作用。您是否尝试在li标记上附加onClick事件处理程序。例如在功能部件中：-

const [state, setState] = useState('');
function handleClick(event) {
setState(event.target.id);
}

<li id="3" onClick={handleClick}>Demo</li>