antd Tree组件中，自定义右键菜单

最近项目中，有一个需求是自定义antd的Tree组件的右键菜单功能。

直接上代码

class Demo extends Component {state = {rightClickNodeTreeItem: {pageX: "",pageY: "",id: "",categoryName: ""}}// tree列表上右键事件onRightClick = e => {this.setState({rightClickNodeTreeItem: {pageX: e.event.pageX,pageY: e.event.pageY,id: e.node.props["data-key"],categoryName: e.node.props["data-title"]}});};// 自定义右键菜单内容getNodeTreeRightClickMenu = () => {const { pageX, pageY, id, categoryName } = { ...this.state.rightClickNodeTreeItem };const tmpStyle = {position: "absolute",left: `${pageX - 220}px`,top: `${pageY - 102}px`};const menu = (<div style={tmpStyle} className="self-right-menu"><a onClick={this.addDownGroup.bind(this, id)}>新增下级部门</a><a onClick={this.editGroup.bind(this, id, categoryName)}>修改</a><a>删除目录</a></div>);return this.state.rightClickNodeTreeItem == null ? "" : menu;};render(){return (...{this.getNodeTreeRightClickMenu()}...)}}export default Demo;

转载于:https://www.cnblogs.com/zhouyangla/p/9795998.html

总结

以上是生活随笔为你收集整理的antd Tree组件中，自定义右键菜单的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。