react如何实现事件委托

Question

js实现事件委托：
`<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id="post-3">Item 3</li>
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6">Item 6</li>
</ul>`

// 获取父节点，并为它添加一个click事件
document.getElementById("parent-list").addEventListener("click",function(e) {
  // 检查事件源e.targe是否为Li
  if(e.target && e.target.nodeName.toUpperCase == "LI") {
    // 真正的处理过程在这里
    console.log("List item ",e.target.id.replace("post-")," was clicked!");
  }
});

请问下，我用react该如何实现呢？

Answer 1

react的onClick本身就是事件委托了，和原生JS的onclick不一样，所以你可以直接在li上面绑定，建议不要这样写li。

[1,2,3,4,5].map((item, index) => {
    return <li key={index} 
        id=`post-${item}` 
        onClick={(index) => this.clickHandle(index)}
    >Item {item}</li>
})

Answer 2

React 事件处理机制自动实现了事件委托，对所有绑定事件进行统一处理，没有绑定到对应的 DOM 元素上，所以直接在 jsx 中绑定到 li 上并不会影响对性能。

Answer 3

这不是 react 最优的方式

可以这样写

render() {
    return(
        <ul>
            <li onClick={() => handleClick(1)} >
                Item 1
            </li>
            <li onClick={() => handleClick(2)} >
                Item 2
            </li>
        </ul>
        )
}