如何一起工作react-table和react-contextmenu

时间:2019-05-28 12:15:44

标签: reactjs react-table

一旦我右键单击表行以弹出上下文菜单。 需要CONTEXT_MENU_ID?

<ReactTable
  ...
  contextMenuId='<CONTEXT_MENU_ID>'
  collect='<METHOD_TO_COLLECT_ROW_INFO>'
  ...
/>

1 个答案:

答案 0 :(得分:1)

您可以在getTrProps中调用onContextMenu。希望对您有帮助

//ReactTable
render(){
    const DeviceContextMenu = () => (
      <Menu id='ContextMenu'>
        <Item>
          <IconFont className="fa fa-trash" />Remove
        </Item>
      </Menu>);

return (
 <ReactTable
   getTrProps={(state, rowInfo) => {
    return {
     onContextMenu: (e) => {
             this.showContextMenu(e, rowInfo.original);
              },
            }
      }}
    />
  )
}
    enter code here

//Function
  showContextMenu = (e, row) => {
    e.preventDefault();
    contextMenu.show({
      id: 'ContextMenu',
      event: e,
      props: {
        rowInfo: row
      }
    });
  };