在 antd table 行内单击按钮时切换微调器

Question

我有一个像这样的 table，有一列包含这样的按钮：

const columns = [
...
  {
    title: "button",
    dataIndex: "key",
    render: (text, record) => {
      return (
        <Button
          icon={<DeleteOutlined />}
          onClick={() => pendingToggle()}
        ></Button>
      );
    }
  }
];

当您单击此按钮时，它应该仅在单击该按钮的那一行将按钮与来自 ant design 的 <Spin /> 交换。我写了一段代码，但它不起作用你可以找到它 here !

我该怎么做？

Answer 1

您需要使用 React 状态，以便 DOM 得到重新渲染。为此，您需要一个 React 组件，例如：

function ButtonCell() {
  const [pending, setPending] = useState(false);

  return pending ? (
    <Spin />
  ) : (
    <Button icon={<DeleteOutlined />} onClick={() => setPending(true)}>
      Delete
    </Button>
  );
}

在您的 table 中，您可以输入：

{
  title: "button",
  dataIndex: "key",
  render: () => {
    return <ButtonCell />;
  } // or just `render: ButtonCell`
}

工作示例：

在 antd table 行内单击按钮时切换微调器

Toggle a spinner on button click inside an antd table row

javascript

reactjs

next.js

antd