无法使Ant设计表格单元格引用动态列数
无法使Ant设计表格单元格引用动态列数
提问于 2021-07-29 18:45:32
我正在尝试让Ant Design <Table />上的一个单元格引用传递给<Table />元素的列的动态定义。但是，当我调用该函数时，它永远不会有更新值。我认为这是一个范围的问题，但我不确定如何去解决它。
问题的示例，单击Add Column，您将看到列数增加，然后单击表中的任一按钮。它调用在父组件上设置的函数，该函数集传递了对columns对象的引用，但它是columns的初始值，而不是当前值。(输出在控制台中)。
https://codesandbox.io/s/dynamic-form-item-antd4169-forked-fsunr?file=/index.js
代码=>
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Button, Table } from "antd";
import { CustomCell } from "./custom-cell.component";
const dataSource = [
{
key: "1",
name: "Click Me"
},
{
key: "2",
name: "Or Me"
}
];
const TableComponent = () => {
const defaultColumns = [
{
title: "Name",
dataIndex: "name",
key: "name",
onCell: (record) => {
return {
record,
testFunction: () => {
console.log(`On test I have **${columns.length}** columns`);
}
};
}
}
];
const [columns, setColumns] = useState(defaultColumns);
useEffect(() => {
console.log(`Updated to have **${columns.length}** number of columns`);
}, [columns]);
const onClick = () => {
const val = `Column ${columns.length + 1}`;
setColumns([...columns, { title: val, dataIndex: val, key: val }]);
};
return (
<div>
<Button onClick={onClick}>Add column</Button>{" "}
<Table
dataSource={dataSource}
columns={columns}
components={{
body: {
cell: CustomCell
}
}}
/>
</div>
);
};
ReactDOM.render(<TableComponent />, document.getElementById("container"));自定义单元格
import React from "react";
import { Button } from "antd";
export const CustomCell = ({ record, testFunction, children }) => {
if (record?.name) {
return <Button onClick={testFunction}>{record.name}</Button>;
}
return children;
};回答 1
Stack Overflow用户
发布于 2021-07-29 19:33:32
我对您的代码做了一些更改，并设法实现了在单击单元格的按钮上记录正确的列数：
从onCell中删除了testFunction，现在它只返回record。
const defaultColumns = [
{
title: "Name",
dataIndex: "name",
key: "name",
onCell: (record) => ({ record }),
},
];创建了一个简单的getColumns函数，它做了你的testFunction曾经做过的事情，这是在你的useState下面实现的。
const getColumns = () => {
console.log(columns);
};编辑你的body > cell render函数，所以现在它在那里添加了getColumns函数，将它与record和children一起分配给testFunction prop，这意味着你的testFunction将总是从状态中获得更新的列。
<Table
dataSource={dataSource}
columns={columns}
components={{
body: {
cell: ({ record, children }) => (
<CustomCell
record={record}
testFunction={() => getColumns()}
children={children}
/>
),
},
}}
/>;如果这对你有效，请让我知道，否则请注明什么不起作用，这样我就可以更新我的答案(如果你需要进一步的澄清，也可以评论)。我在你的代码沙箱上测试了它，它正在工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68581433
复制相关文章
相似问题
腾讯云开发者
