Reactjs Ant设计表组件onChange回调未激发
Ant Design中的Reactjs Ant设计表组件onChange回调未激发,reactjs,antd,Reactjs,Antd,Ant Design中的表组件具有proponChange,每当发生分页、筛选或排序时就会触发该属性。在我的例子中,它是关于过滤的。当使用表头中的默认过滤器元素时,将触发回调。但是我在表组件之外使用自定义过滤器元素,该组件设置本地状态,该状态用于列上的filteredValue属性。过滤本身工作得完美无缺。但是,onChange回调没有被触发。我对onChange中的属性感兴趣,因为它们包含表示实际渲染数据源对象的currentDataSource道具。 我找不到Table的任何其他回调,只要组
表
组件具有proponChange
,每当发生分页、筛选或排序时就会触发该属性。在我的例子中,它是关于过滤的。当使用表头中的默认过滤器元素时,将触发回调。但是我在表
组件之外使用自定义过滤器元素,该组件设置本地状态,该状态用于列上的filteredValue
属性。过滤本身工作得完美无缺。但是,onChange
回调没有被触发。我对onChange
中的属性感兴趣,因为它们包含表示实际渲染数据源对象的currentDataSource
道具。
我找不到Table
的任何其他回调,只要组件呈现,就会触发这些回调
有人知道启用过滤器时获取渲染数据源对象的另一种方法吗?当然,我可以开始对原始DataSource对象进行计算,因为我知道过滤器,但是由于表
提供了一般的信息,我想防止冗余
更新:
请参见此处的基本示例:
无论何时使用表头中的过滤器元素,都会看到一个console.log事件(通过表的onChange prop)。单击底部的按钮时,您将看到过滤器发生更改,但console.log事件不会发生。所述行为是预期的<代码>表格的行为类似于受控的
输入
字段,当外部状态更改时,该字段也会调用非调用onChange
在我的例子中,我对currentDataSource
对象感兴趣,以查看该表包含多少项。当过滤器处于活动状态时,这与数据源不同
您可以从其他地方获取此值。表的分页
有一个showTotal
回调,其签名为函数(总计,范围)
。设置此回调,您将在分页呈现时获得实际的项目总数
<Table
dataSource={someData}
columns={someColumns}
pagination={{
showTotal: (total, range) => {
console.log({ total, range });
}
}}
/>
{
log({total,range});
}
}}
/>
更新:
Ant设计团队提供的关于外部状态变化时组件行为信息的反馈:请提供一个可生产的示例,请参阅。我想帮助您,但说“但onChange回调未启动”是不够的,需要查看具体示例您可以添加一个带有堆栈片段的示例,如链接中所述,或在codesandbox上使用。@DennisVash添加了codesandbox示例。谢谢你的帮助。我不认为这是可能的,如果是的话,你应该试着用Table's ref.“Table's ref”?你的意思是像引用DOM元素一样?对表进行分页时,这不会有任何帮助。您是否找到了一种方法来获取在应用自定义筛选后显示的行或行标识符,而不仅仅是计数?另外,我在-上看到了您的问题,可能值得添加一个对github.com问题的引用,该问题在这个答案中。@k1eran否,我没有找到/需要获得筛选行的方法。您可能也在ant design repo上发现了这些问题。它链接到另一个被合并的文档,但是查看文档,我找不到任何关于这个的信息。正如您在问题中所描述的,我也不愿意复制工作/状态来计算显示的行,因为它已经在内部的antd表中。顺便说一句,我查看它的原因是,我有代码对表选择做出反应(这有一个有用的回调),但我想知道所选行列表是否可见,即,没有使用编程过滤进行过滤。antd表回调可以很好地为我提供所选的行,但不能提供令人失望的其他部分。也许我忽略了另一种方法,但我认为这是一个不幸的antd限制。