Контекстное меню React в таблице реакции с помощью react-contextxify
У меня есть проект, в котором я использую таблицу реакции, но мне также нужно контекстное меню, которое всплывает при щелчке правой кнопкой мыши по строке в таблице реакции. Единственное, что я не могу получить, это данные выбранной строки. Поскольку мне нужно обернуть всю таблицу реакций в компонент контекстного меню, 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.info(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
Вам нужно добавить onClick что-то вроде ниже. Для вызова функций, объявленных внутри компонента, вам необходимо использовать this.functionName
onClick = {e => this.onClick({e, param2, param3, param4})}
Также ваш код нуждается в исправлениях. Ваш код должен выглядеть, как показано ниже, и добавить onClick, как предложено выше.
const onClick = ({ event, ref, data, dataFromProvider }) => {
console.info(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>
);
Я могу щелкнуть данные строки следующим образом.
Свойство onContextMenu объекта getTdProps вызовет щелчок правой кнопкой мыши, так что для состояния будет установлено значение 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.info(activeItem)
},
onContextMenu:()=>{
console.info("contextMenu", rowInfo);
this.setState({showContextMenu:true ,rowClickedData: rowInfo.original});
}
}
}
}
/>
</ContextMenuTrigger>
{
this.state.showContextMenu ?
<MyAwesomeMenu clickedData = {this.state.rowClickedData} />
:null
}
const onClick = (props) =>
console.info("-------------->",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>
);
Это работает для меня.
Спасибо.
Если вы уверены, что showContextMenu - это null или false в случае ложности, вы можете сократить троичное до this.state.showContextMenu && <MyAwesomeMenu .../>.
Удалось ли вам это решить?