Как добавить контекстное меню, чтобы реагировать на строку таблицы и получать доступ к ее свойствам? - PullRequest
Новая
       35

Как добавить контекстное меню, чтобы реагировать на строку таблицы и получать доступ к ее свойствам?

1 голос
/ 14 июня 2019

Я добавил пакет реагирующей таблицы в свой проект, и все в порядке, но я также хотел иметь возможность щелкнуть правой кнопкой мыши строку и выполнить некоторые действия с ней (отмена, пауза и т. Д.).Я использую React с Typescript, но надеюсь, что это не добавляет никакой сложности.

Моя первоначальная идея состояла в том, чтобы использовать response-contextify, однако я не могу найти какие-либо рабочие примеры, которые бы совмещали реакцию-таблицу иresponse-contextify вместе.

Единственный "рабочий" пример, который я нашел, это: Контекстное меню реагирования на таблице реакции с использованием response-contexify

В итоге я не сталс использованием response-contextify, и это «вроде работает», но я не совсем уверен в этом, так как иногда получаю исключения вроде этого: 

Uncaught TypeError: Cannot read property 'original' of undefined

Код, который у меня сейчас есть, таков: 

const columns = [
      {
        Header: "Name",
        accessor: "name"
      },
      {
        Header: "Age",
        accessor: "age",
        Cell: (props: { value: React.ReactNode }) => (
          <span className="number">{props.value}</span>
        ) 
      },
      {
        id: "friendName", // Required because our accessor is not a string
        Header: "Friend Name",
        accessor: (d: { friend: { name: any } }) => d.friend.name // Custom value accessors!
      },
      {
        Header: (props: any) => <span>Friend Age</span>, // Custom header components!
        accessor: "friend.age"
      }
    ];


return (
      <div>
        <ContextMenuTrigger id="menu_id">
          <ReactTable
            data={data}
            columns={columns}
            showPagination={false}
            getTdProps={(
              state: any,
              rowInfo: any,
              column: any,
              instance: any
            ) => {
              return {
                onClick: (e: any, handleOriginal: any) => {
                  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}
      </div>
    );
  }
}

const MyAwesomeMenu = (props: { clickedData: any }) => (
  <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>
);

const onClick = (props: {
  e:
    | React.TouchEvent<HTMLDivElement>
    | React.MouseEvent<HTMLDivElement, MouseEvent>;
  props: Object;
}) => console.log("-------------->", props);

Каков наилучший (и самый простой) способ добавить контекстное меню в таблицу реагирования, чтобы я мог использовать реквизиты выбранной строки?Я действительно люблю реагировать, но не нашел примеров.

Спасибо

...