react列表中元素被点击后，所有元素都弹出面板的问题

前提：聚合笔记功能开发中，需要展示笔记列表，且允许点击某条笔记后弹出菜单面板，面板上可选择编辑等功能。

问题：react中使用map方法展示笔记列表，且给每个value加上一个点击事件，点击后弹出菜单面板，预期效果是点某个笔记，则在该笔记的某个相对位置弹出面板，而实际情况是点击某个笔记后，所有笔记的面板都被弹出。

 

 

 

原因分析

---

代码的处理方式是：

{(showMyAnnoBackgroundPlate && 
 <div className={styles.backgroundPlate}> </div>)}

　　

showMyAnnoBackgroundPlate 是一个boolean值，当点击笔记的时候会置为true，但是因为每条笔记都依赖这个值，所以导致某条笔记点击后，该值为true，导致判断生效，每个笔记都弹出了面板。

 

 

 

 

解决方案

---

要解决这个问题，就需要增加判断：本笔记是否是被点击的笔记，是则弹出面板，否则不弹出。

逻辑出来了，就是实现方案了：

利用react的state特性，在state中设置一个变量：curClickAnnoId（当前点击笔记ID），

点击笔记时，不仅将showMyAnnoBackgroundPlate设为true，还要将该笔记的ID赋予curClickAnnoId，

然后再修改原有判断：

{(ID === this.state.curClickAnnoId) && showMyAnnoBackgroundPlate && 
<div className={styles.backgroundPlate}>)}