Question

我想在Fixed Data Table组件的单元格中为工具提示内容实施click和hover个事件。我使用react-tippy用于html选项的工具提示来创建下拉菜单。我可以显示工具提示，但我无法为工具提示中的内容添加其他事件。

不会触发 ActionCell.jsx 中onMouseEnter中的

onClick和.actions-list__item个事件。

react-tippy-data-table.firebaseapp.com

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

Table.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',
  },
});

Answer 1

我需要为interactive

使用react-tippy参数

Answer 2

<pre>
    import React from 'react';

    import Tooltip from './Tooltip';

    interface IProps {
        className?: string;
        value?: string;
        colSpan?: number;
    };

    interface IState {
        status: boolean
    };

    class TableCell extends React.Component<IProps, IState> {
        private myRef = React.createRef();
        constructor (props: IProps) {
            super(props);
            this.state = {
                status: false
            }
        }
        hoverHandler(event: any) {
            if (event.target.scrollWidth > event.target.offsetWidth) {
                this.setState({
                    status: true
                });
            } else {
                this.setState({
                    status: false
                });
            }
        }
        render () {
            return (
                <td colSpan={this.props.colSpan} className={this.props.className}>
                    <span onMouseEnter={this.hoverHandler.bind(this)} className="td-overflow">
                        {this.props.value}
                    </span>
                    <Tooltip
                        status={this.state.status}
                        value={this.props.value}>
                    </Tooltip>
                </td>
            );
        }
    };

    export default TableCell;

    // in other file use the custom Tooltip component
    import React from 'react';

    interface IProps {
        value?: string;
        status?: boolean;
    };

    interface IState {
    };

    class Tooltip extends React.Component<IProps, IState> {
        render () {
            if (this.props.status) {
                return (
                    <span className="tooltip">
                        {this.props.value}
                    </span>
                );
            }
            return (
                <span>
                </span>
            );
        }
    };

    export default Tooltip;

    // corresponding css

    .tooltip {
      display: none;
      position: absolute; 
      z-index: 100;
      border: 1px;
      background-color:white;
      border-style: solid;
      border-width: 1px;
      border-color:#0c7c84;
      padding: 5px;
      color:#0c7c84;
      font-size: 16px;
      border-radius: 5px;
      top: -50px;
      left: 50px;
      white-space: pre-line;
      word-break: break-all;
      width:100%;
    }
    .td-overflow {
      display: inline-block;
      overflow: hidden;
      width: 90%;
      text-overflow: ellipsis;
    }
</pre>

you can use the custom tooltip component to show tooltip on hover, tooltip visible only if data is over flow in td.

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

2 个答案: