使用react-contexify在React表上的React上下文菜单 [英] React Context Menu on react table using react-contexify

问题描述

我有一个与React Table一起使用的项目，但在右键单击React表中的行时还需要一个上下文菜单。我唯一无法得到的是选定的行数据。因为我必须将整个反应表包装在上下文菜单组件中，所以props仅返回主要的反应表组件，而不返回活动行。这是我的代码。

I have a project that I am using react table with but also need a context menu to popup on right click of the row in the react table. The only thing I cant get is the selected row data. Because I have to wrap the entire react table in the context menu component, props returns just the main react table component and not active row. Here is my code.

<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 />

然后在文件的顶部声明菜单并单击功能

Then up top in the file I declare the menu and click function

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>
);

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

Just need the last piece to the puzzle. thanks if you can help

推荐答案

我能够按以下方式单击行数据。

I am able to get the row data clicked as follows.

onContextMenu属性将触发右键单击，因此状态设置为true，表示要显示我们的Awesome菜单，并同时通过道具发送数据。

onContextMenu property of the getTdProps will triggere the right click, so that the state is set to true which says to show our Awesome menu to be shown and at the same time the data is sent through 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>
);

这对我有用。

谢谢。

这篇关于使用react-contexify在React表上的React上下文菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！