reactjs - 使用react-contexify在 react 表上 react 上下文菜单

Question

我有一个正在使用 react 表的项目，但还需要右键单击 react 表中的行来弹出上下文菜单。我唯一无法获取的是选定的行数据。因为我必须将整个 react 表包装在上下文菜单组件中，所以 props 仅返回主要 react 表组件，而不返回事件行。这是我的代码。

<ContextMenuProvider id="menu_id">
                    <ReactTable
                      data={items}
                      columns={columns}
                      showPagination={false}
                      getTdProps={(state, rowInfo, column, instance) => {
                        return {
                          onClick: (e, handleOriginal) => {
                            const activeItem = rowInfo.original
                            this.getDetails(activeItem.contact_id)
                          }
                        }
                      }

                    }
                    />
                    </ContextMenuProvider>

                    <MyAwesomeMenu />

然后在文件顶部我声明菜单和单击功能

const onClick = ({ event, ref, data, dataFromProvider }) => 
console.log(ref.props);
// create your menu first
const MyAwesomeMenu = () => (
    <ContextMenu id='menu_id'>
       <Submenu label="Color">
        <Item data="green" onClick={onClick}><div className="green"></div> </Item>
        <Item data="yellow" onClick={onClick}><div className="yellow"></div> 
            </Item>
        <Item data="red" onClick={onClick}><div className="red"></div></Item>
       </Submenu>
    </ContextMenu>
);

只需要拼图的最后一 block 。如果您能提供帮助，谢谢

Answer 1

我能够按如下方式获取单击的行数据。

getTdProps 的 onContextMenu 属性将触发右键单击，从而将状态设置为 true，即显示要显示的 Awesome 菜单，同时通过 props 发送数据。

<ContextMenuTrigger id="menu_id">
    <ReactTable
                  data={Data}
                  columns={Columns}
                  showPagination={false}
                  getTdProps={(state, rowInfo, column, instance) => {
                    return {
                      onClick: (e, handleOriginal) => {
                        const activeItem = rowInfo.original
                        console.log(activeItem)
                      },
                      onContextMenu:()=>{
                        console.log("contextMenu", rowInfo);
                        this.setState({showContextMenu:true ,rowClickedData: rowInfo.original});
                      }
                    }
                  }

                }
                />
        </ContextMenuTrigger>
        {
          this.state.showContextMenu ?
           <MyAwesomeMenu clickedData={this.state.rowClickedData} />
          :null
        }





const onClick = (props) => 
  console.log("-------------->",props );
// create your menu first
const MyAwesomeMenu = (props) => (
    <ContextMenu id='menu_id'>
        <MenuItem data={props.clickedData} onClick={(e,props) => onClick({e,props})}><div className="green">
        ContextMenu Item 1 - {props.clickedData.id}
        </div> 
        </MenuItem>

    </ContextMenu>
);

这对我有用。

谢谢。