如何在材料表中创建 onHover 动作？

Question

我正在使用material-table 并尝试对我当前悬停的行实现高亮显示。

documentation 仅在第三个示例中为 onRowClick 操作提供颜色变化：

function SelectedRowStyling() {
  const { useState } = React;
  const [selectedRow, setSelectedRow] = useState(null);
  
  return (
    <MaterialTable
      title="Selected Row Styling Preview"
      columns={[
        { title: 'Name', field: 'name' },
        { title: 'Surname', field: 'surname' },
        { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
        {
          title: 'Birth Place',
          field: 'birthCity',
          lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
        },
      ]}
      data={[
        { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
        { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
      ]}
      onRowClick={((evt, selectedRow) => setSelectedRow(selectedRow.tableData.id))}
      options={{
        rowStyle: rowData => ({
          backgroundColor: (selectedRow === rowData.tableData.id) ? '#EEE' : '#FFF'
        })
      }}
    />
  )
}

我在源代码中阅读了可用的props，并没有找到像onRowHover 这样的东西。尝试了一些ThemeProvider 解决方案，但没有成功，我如何通过悬停动作实现颜色变化？

Answer 1

我使用此处提供的方法enter link description here 和enter link description here 做了以下示例

我认为关键是重写 Row 组件以访问 onMouseEnter 和 onMouseLeave 事件：

components={{
      Row: props => {
        return (
          <MTableBodyRow
            {...props}
            onMouseEnter={e => handleRowHover(e, props)}
            onMouseLeave={e => handleRowHoverLeave(e, props)}
          />
        );
      }
    }}

还可以像这样设置 rowStyle 选项：

rowStyle: rowData => ({
        backgroundColor:
          rowData.tableData.id === hoveringOver ? "#0471ff" : ""
      })

这是完整的示例代码：

    import React, { Fragment, useState } from "react";
import MaterialTable, { MTableBodyRow } from "material-table";

export default function CustomEditComponent(props) {
const [hoveringOver, setHoveringOver] = useState("");

const tableColumns = [
    { title: "Client", field: "client", width: "40%" },
    { title: "Name", field: "name", width: "40%" },
    { title: "Year", field: "year", width: "20%" }
];

const tableData = [
    {
    client: "client1",
    name: "Mary",
    year: "2019"
    },
    {
    client: "client2",
    name: "Joe",
    year: "2018"
    },
    {
    client: "client3",
    name: "Kal",
    year: "2019"
    },
    {
    client: "client4",
    name: "Dal",
    year: "2012"
    }
];

const handleRowHover = (event, propsData) => setHoveringOver(propsData.index);

const handleRowHoverLeave = (event, propsData) => setHoveringOver("");

return (
    <Fragment>
    <MaterialTable
        columns={tableColumns}
        data={tableData}
        title="Material Table sample"
        options={{
        tableLayout: "fixed",
        search: false,
        rowStyle: rowData => ({
            backgroundColor:
            rowData.tableData.id === hoveringOver ? "#0471ff" : ""
        })
        }}
        components={{
        Row: props => {
            return (
            <MTableBodyRow
                {...props}
                onMouseEnter={e => handleRowHover(e, props)}
                onMouseLeave={e => handleRowHoverLeave(e, props)}
            />
            );
        }
        }}
    />
    </Fragment>
);
}

这里是sandbox。我希望这对你有用！