Question

我正在使用反应物料表。我需要这样的功能：我使用远程数据模式来获取记录列表，然后使用自定义列呈现功能在表中每行的末尾添加一个Material Button，当用户按下此按钮时按钮，我希望它被隐藏。我怎样才能做到这一点。我期待着您的帮助。

Answer 1

我创建了这个示例，单击按钮将其禁用，并且变量设置为加载状态：

此处的关键方面是定义一些东西，以标识正在更新的行。我使用了一个额外的column，您还可以在上面显示一个微调框组件：

{
  field: "isUpdating",
  render: (rowdata) =>
    fetchingClient === rowdata.name
      ? "loading.." // Add your  <Spinner />
      : null
},

由于您希望将按钮呈现为自定义列（其他方式可以使用操作），因此可以在该列的render属性上使用rowdata参数访问您要查找的内容：

{
  field: "join",
  sorting: false,

  render: (rowdata) => (
    <button
      disabled={fetchingClient === rowdata.name}
      onClick={(event) => fetchDataFromRemote(rowdata.name)}
    >
      Go fetch
    </button>
  )
}

这里是sandbox和完整代码的链接，希望它对您有用！

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

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

const fetchDataFromRemote = (clientName) => {
    console.log(clientName);
    setFetchingClient(clientName);
};
const tableColumns = [
    { title: "Client", field: "client" },
    { title: "Name", field: "name" },
    {
    field: "isUpdating",
    render: (rowdata) =>
        fetchingClient === rowdata.name
        ? "loading.." // Add your  <Spinner />
        : null,
    },
    {
    field: "join",
    sorting: false,
    render: (rowdata) => (
        <button
        disabled={fetchingClient === rowdata.name}
        onClick={(event) => fetchDataFromRemote(rowdata.name)}
        >
        Go fetch
        </button>
    ),
    },
];

const tableData = [
    {
    client: "client1",
    name: "Jasnah",
    year: "2019",
    },
    {
    client: "client2",
    name: "Dalinar",
    year: "2018",
    },
    {
    client: "client3",
    name: "Kal",
    year: "2019",
    },
];

return (
    <Fragment>
    <MaterialTable
        columns={tableColumns}
        data={tableData}
        title="Material Table - custom column  "
        options={{ search: false }}
    />
    </Fragment>
);
}

按下物料表后如何隐藏按钮

1 个答案: