javascript - 如何将自定义水平滚动事件添加到 React 材质表

Question

我正在尝试实现一个带有箭头图标的滑块，允许用户水平滚动材料表。我已经做了滑块组件，但是箭头中的滚动事件还没有工作。我在材料表中添加了一个 tableRef 并尝试使用 tableEl.current.scrollTo() 函数，但不幸的是，它不起作用。那么如何创建 eventHandlers 来水平滚动表格呢？

我的自定义材料表

我的滑块组件：

import React from 'react';
import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';

export function TableSlider({ onClickToRigth, onClickToLeft }) {
    return (
      <div style={{ zIndex: 1000, top: "39px", position: "absolute", width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <ArrowBackIosIcon 
          onClick={onClickToLeft} 
          style={{ marginLeft: "4px", cursor: "pointer", opacity: "0.7" }}
         />
        <ArrowForwardIosIcon 
          onClick={onClickToRigth} 
          style={{ cursor: "pointer", opacity: "0.8" }}
         />
      </div>
    )
}

我的自定义材料表。请注意，我创建了一个 useRef 并将其添加到材料表中： tableRef={tableEl}

import React, { useRef } from 'react';
import { Grid } from '@material-ui/core';
import MaterialTable from 'material-table';
import PropTypes from "prop-types";
import { MTableToolbar } from 'material-table';
import { injectIntl } from 'react-intl';
import { TableSlider } from '../table-slider';

function MyMaterialTable(props) {
  const tableEl = useRef(null);

  const { title, urledit, columns, data, options, deleteItem, rowClick, action } = props;
  var opt = options;
  if (opt == null) {
    opt = {
      sorting: true,
      pageSize: 10,
      showSelectAllCheckbox: true,
      columnsButton: true,
      toolbar: true,
      minBodyHeight: 550,
      paging: false,
      headerStyle: {
        backgroundColor: '#f9f9f9',
        fontWeight: 'bold',
        borderBottom: '2px solid #b3b3b3',
        height: '100px'
      }
    };
  }

  opt.toolbar = false;

  const handleDelete = (data, resolve) => {
    deleteItem(data, resolve);
  };

  const scrollToRigth = () => {
    console.log(tableEl.current)
    // Can i use those functions with a useRef?
    tableEl.current.scrollTo()
    tableEl.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
  };

  const scrollToLeft = () => {
    // Can i use those functions with a useRef?
    tableEl.current.scrollTo()
    tableEl.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
  };

  const intl = props.intl;
  return (
    <Grid container spacing={0} >
      <Grid item xs={12} sm={12} style={{ position: "relative", display: 'table', tableLayout: 'fixed', width: '100%', minWidth: '210px', paddingLeft: 0, paddingRight: 0 }}>
        <TableSlider onClickToLeft={scrollToLeft} onClickToRigth={scrollToRigth} />
          <MaterialTable
            title={title}
            tableRef={tableEl}
            id="material-table-id"
            columns={columns}
            data={data}
            options={opt}
            onRowClick={rowClick}
            actions={action}
            components={{
              Toolbar: props => (
                <div style={{ backgroundColor: '#e8eaf5', color: '#000000' }}>
                  <MTableToolbar {...props} />
                </div>
              ),
            }}
            localization={{
              grouping: {
                groupedBy: intl.formatMessage({ id: "grouped.by" }),
                placeholder: intl.formatMessage({ id: "headers.drap" })
              },
              pagination: {
                labelDisplayedRows: '{from}-{to} ' + intl.formatMessage({ id: "of" }) + ' {count}',
                labelRowsPerPage: intl.formatMessage({ id: "recordsPerPage" }),
                labelRowsSelect: intl.formatMessage({ id: "records" })
              },
              toolbar: {
                addRemoveColumns: intl.formatMessage({ id: "add.remove" }),
                nRowsSelected: '{0}' + intl.formatMessage({ id: "rows.select" }),
                showColumnsTitle: intl.formatMessage({ id: "show.columns" }),
                showColumnsAriaLabel: intl.formatMessage({ id: "show.columns" }),
                exportTitle: intl.formatMessage({ id: "export" }),
                exportAriaLabel: intl.formatMessage({ id: "export" }),
                exportName: intl.formatMessage({ id: "export.csv" }),
                searchTooltip: intl.formatMessage({ id: "search" }),
                searchPlaceholder: intl.formatMessage({ id: "search" })
              },
              header: {
                actions: ''
              },
              body: {
                emptyDataSourceMessage: intl.formatMessage({ id: "rows.show" }),
                filterRow: {},
                editRow: {
                  saveTooltip: intl.formatMessage({ id: "save" }),
                  cancelTooltip: intl.formatMessage({ id: "cancel" }),
                  deleteText: intl.formatMessage({ id: "sure.delete" })
                },
                addTooltip: intl.formatMessage({ id: "add" }),
                deleteTooltip: intl.formatMessage({ id: "delete" }),
                editTooltip: intl.formatMessage({ id: "update" })
              }
            }}
          />
      </Grid>
    </Grid>
  );
}

export default injectIntl(MyMaterialTable);

MyMaterialTable.propTypes = {
  title: PropTypes.string,
  urledit: PropTypes.string,
  columns: PropTypes.array,
  data: PropTypes.array,
  options: PropTypes.object,
  deleteItem: PropTypes.func,
  rowClick: PropTypes.func,
  action: PropTypes.func
};

这是我的问题，我不知道如何使用 ref 水平滚动我的表格。tableEl.current.scrollTo() 和 tableEl.current.scrollIntoView() 返回 undefined

  const scrollToRigth = () => {
    console.log(tableEl.current)
    // Can i use those functions with a useRef?
    tableEl.current.scrollTo()
    tableEl.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
  };

  const scrollToLeft = () => {
    // Can i use those functions with a useRef?
    tableEl.current.scrollTo()
    tableEl.current.scrollIntoView({ behavior: 'smooth', block: 'start' })
  };

标签： javascriptreactjsmaterial-ui