Question

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

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

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

Answer 1

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

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

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

这对我有用。

谢谢。

Answer 2

您需要添加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-contexify在React表上的React上下文菜单

2 个答案: