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

IT技术 reactjs material-ui material-table
2021-05-18 07:38:05

我正在使用material-table并尝试对我当前悬停的行实施突出显示。

该文档仅提供了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解决方案，但没有成功，我如何通过悬停动作实现颜色变化？

1个回答

我使用此处提供的方法制作了以下示例在此处输入链接描述并在此处输入链接描述

在此处输入图片说明

我认为关键是覆盖 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>
);
}

这是沙箱。我希望这对你有用！

其它你可能感兴趣的问题
上一篇如何使用 this.props.children 将props从父级传递给子级？ 下一篇使用 ReactJS 通过 JSON 数据从产品列表重定向到产品详细信息页面