Реактивное контекстное меню на реагирующей таблице с использованием response-contexify - PullRequest
Новая
       16

Реактивное контекстное меню на реагирующей таблице с использованием response-contexify

0 голосов
/ 01 октября 2018

У меня есть проект, с которым я использую таблицу реагирования, но мне также нужно контекстное меню для всплывающего щелчка правой кнопкой мыши по строке в таблице реагирования.Единственное, что я не могу получить - это данные выбранной строки.Поскольку мне нужно обернуть всю таблицу реагирования в компонент контекстного меню, реквизиты возвращают только основной компонент таблицы реагирования, а не активную строку.Вот мой код. 

<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 ]

0 голосов
/ 20 апреля 2019

Я могу получить данные строки, щелкнувшие следующим образом.

Свойство onContextMenu объекта getTdProps вызовет щелчок правой кнопкой мыши, так что для состояния установлено значение 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>
);

Это работает для меня.

Спасибо.

0 голосов
/ 01 октября 2018

Вам нужно добавить на клик что-то вроде ниже.Для вызова функций, объявленных внутри компонента, вам нужно использовать 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>
     );
...