最近項目中，有一個需求是自定義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组件中，自定义右键菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。