javascript - 固定数据表中的悬停工具提示内容

Question

我想在固定数据表组件的单元格中实现工具提示内容click和事件。我使用react-tippy作为工具提示，并带有创建下拉菜单的选项。我可以显示工具提示，但我无法为工具提示内的内容添加其他事件。hoverhtml

onMouseEnter并且ActionCell.jsx中的onClick事件不会被触发。.actions-list__item

react-tippy-data-table.firebaseapp.com

我无法在 jsfiddle 中运行 react-tippy，所以我将示例项目部署到了​​ firebase。

表.jsx

import React, { Component } from 'react';
import debounce from 'lodash/debounce';
import { Table, Column, Cell } from 'fixed-data-table-2';
import ActionCell from './ActionCell.jsx';
import 'fixed-data-table-2/dist/fixed-data-table.min.css';

export default class TestMeetView extends Component {
  static propTypes = {};

  state = {
    tableData: [
      {
        start: '5/19',
        end: '5/20',
        host: 'DACA',
      },
      {
        start: '6/15',
        end: '6/15',
        host: 'DACA',
      },
      {
        start: '6/16',
        end: '6/17',
        host: 'DACA',
      },
      {
        start: '7/15',
        end: '7/16',
        host: 'DACA',
      },
      {
        start: '7/30',
        end: '7/31',
        host: 'DACA',
      },
    ],
    columnWidths: {
      start: 200,
      end: 200,
      host: 200,
      action: 100,
    },
    tableContainerWidth: 0,
    scrollToRow: null,
  };

  componentDidMount() {
    this.updateWidth();
    this.updateWidth = debounce(this.updateWidth, 200);
    window.addEventListener('resize', this.updateWidth);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.updateWidth);
  }

  onTableColumnResizeEndCallback = (newColumnWidth, columnKey) => {
    this.setState(({ columnWidths }) => ({
      columnWidths: {
        ...columnWidths,
        [columnKey]: newColumnWidth,
      },
    }));
  };

  updateWidth = () => {
    if (
      this.tableContainer &&
      this.tableContainer.offsetWidth !== this.state.tableContainerWidth
    ) {
      const newTableContainerWidth = this.tableContainer.offsetWidth;
      this.setState({
        tableContainerWidth: newTableContainerWidth,
        columnWidths: {
          start: newTableContainerWidth / 4,
          end: newTableContainerWidth / 4,
          host: newTableContainerWidth / 4,
          action: newTableContainerWidth / 4,
        },
      });
    }
  };

  render() {
    return (
      <div className="test-view">
        <div className="container-fluid">
          <div className="mb-5" ref={el => (this.tableContainer = el)}>
            <Table
              scrollToRow={this.state.scrollToRow}
              rowsCount={this.state.tableData.length}
              rowHeight={50}
              headerHeight={50}
              width={this.state.tableContainerWidth}
              height={300}
              touchScrollEnabled
              onColumnResizeEndCallback={this.onTableColumnResizeEndCallback}
              isColumnResizing={false}
            >
              <Column
                columnKey="start"
                header={<Cell>Start</Cell>}
                cell={props => <Cell {...props}>{this.state.tableData[props.rowIndex].start}</Cell>}
                width={this.state.columnWidths.start}
                isResizable
              />
              <Column
                columnKey="end"
                header={<Cell>End</Cell>}
                cell={props => <Cell {...props}>{this.state.tableData[props.rowIndex].end}</Cell>}
                width={this.state.columnWidths.end}
                isResizable
              />
              <Column
                columnKey="host"
                header={<Cell>Host</Cell>}
                cell={props => <Cell {...props}>{this.state.tableData[props.rowIndex].host}</Cell>}
                width={this.state.columnWidths.host}
                isResizable
              />
              <Column
                columnKey="action"
                header={<Cell>Action</Cell>}
                cell={<ActionCell />}
                width={this.state.columnWidths.action}
                isResizable
              />
            </Table>
          </div>
        </div>
      </div>
    );
  }
}

ActionCell.jsx

import React from 'react';
import { Cell } from 'fixed-data-table-2';
import { Tooltip } from 'react-tippy';
import 'actionCell.scss';

const { StyleSheet, css } = require('aphrodite');

export default class ActionCell extends React.PureComponent {
  render() {
    const {data, rowIndex, columnKey, collapsedRows, callback, ...props} = this.props;
    return (
      <Cell {...props} className={css(styles.actionCell)}
      onMouseEnter={() => { console.log('cell mouse enter') }}
      onMouseLeave={() => { console.log('cell mouse leave') }}
      >
        <Tooltip
          title="action"
          position="bottom"
          trigger="click"
          animation="fade"
          theme="light"
          arrow
          html={
            <ul className="actions-list">
              <li className="actions-list__item text-left"
              onMouseEnter={() => { console.log('list item mouse enter') }}
              onMouseLeave={() => { console.log('list item mouse leave') }}
              onClick={() => { console.log('list item click') }}>Close</li>
              <li className="actions-list__item text-left">Details</li>
              <li className="actions-list__item text-left">Edit</li>
              <li className="actions-list__item text-left">Delete</li>
            </ul>
        }
        >
          <div className="action-cell">
            <i className="fa fa-ellipsis-h fa-lg action-cell__icon" />
          </div>
        </Tooltip>
      </Cell>
    );
  }
}

const styles = StyleSheet.create({
  actionCell: {
    cursor: 'pointer',
  },
});

标签： javascriptcssreactjsfixed-data-table

Answer 1

我需要对react-tippy使用交互参数