Reactjs 使用React-contexify在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 />

{
返回{
onClick：（e，handleOriginal）=>{
const activeItem=rowInfo.original
this.getDetails（activeItem.contact\u id）
}
}
}
}
/>

然后在文件的顶部声明菜单并单击函数

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

const onClick=（{event，ref，data，dataFromProvider}）=>
控制台日志（参考道具）；
//首先创建菜单
常量MyAwesomeMenu=（）=>(
);

---

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

您需要添加以下内容。要调用组件中声明的函数，需要使用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>
     );

const onClick=（{event，ref，data，dataFromProvider}）=>{
控制台日志（参考道具）；
这个.MyAwesomeMenu（）；
}
常量MyAwesomeMenu=（）=>(
);

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

getTdProps的onContextMenu属性将触发右键单击，以便将状态设置为true，这表示显示要显示的令人敬畏的菜单，同时通过道具发送数据

<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：（e，handleOriginal）=>{
const activeItem=rowInfo.original
console.log（activeItem）
},
onContextMenu:（）=>{
log（“contextMenu”，rowInfo）；
this.setState（{showContextMenu:true，rowClickedData:rowInfo.original}）；
}
}
}
}
/>
{
这个.state.showContextMenu？
：null
}
const onClick=（道具）=>
console.log（“------------>”，props）；
//首先创建菜单
const MyAwesomeMenu=（道具）=>(
onClick（{e，props}）}>
上下文菜单项1-{props.clickedData.id}
);

这对我有用

---

谢谢。

你能解决这个问题吗？只要你确保

showContextMenu

为

null

或

false

时出错，你就可以将三元数缩短为

this.state.showContextMenu&

。