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

IT技术 reactjs contextmenu react-table
2021-05-06 00:06:28

我有一个项目，我正在使用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>
);

只需要拼图的最后一块。谢谢如果你能帮忙

2个回答

我可以按如下方式点击行数据。

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

这对我有用。

谢谢。

您需要添加如下所示的 onClick 内容。要调用组件内部声明的函数，您需要使用 this.functionName

  onClick={e => this.onClick({e, param2, param3, param4})}

您的代码也需要更正。您的代码应该如下所示，并按照上面的建议添加 onClick

    const onClick = ({ event, ref, data, dataFromProvider }) => {
      console.log(ref.props);
      this.MyAwesomeMenu();
    }

  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>
     );
其它你可能感兴趣的问题
上一篇如何在 React.JS 中创建一个简单的列表生成器应用程序？ 下一篇Jest 测试失败