用纯React写右键菜单真麻烦,最后还是得用DOM操作

用react操作右键菜单

右键菜单是很复杂的

1,弹出菜单--位置要随时变化
2,弹出层要正确处理各种鼠标事件
3,子菜单设计也很复杂
4,图标+菜单内部按钮难以加入
5,双重事件难以获取事件源(右键事件-->右键事件)
6,数据+UI如何同步(更新DOM元素以后更新后台数据)

想了好久以后终于出了个demo

原理:

<ContexeMenu >

   <MenuItem onClick=callback>删除</MenuItem>

<ContexeMenu/>

在ContextMenu内部自动用上级绑定DOM元素,

在右键事件中把event.target缓存到MenuItem的src中

MenuItem回调函数把src入参

这是代码:https://github.com/youwi/react-contextmenu

callback把DOM元素获取到以后根据react.key去对应的store中删除,然后更新界面.

callback(event,src){

    state={...state,getStore()[src.key]:null};//删除元素,如上图中的"角色管理"

    this.setState({state:state});//数据删除以后更新界面

}