语义界面反应选择表单元格不起作用 [英] semantic ui react select table cells not working

问题描述

在我的Reactjs应用程序中，我想创建一个包含可选单元格的表格。在单击每个单元格时，将返回一个值。 根据documentation，我应该选择selectable。所以我的定义如下：

<Table.Cell selectable key={j + k} onClick={this.handleCellClick(j, k)}> {j + k} </Table.Cell>

thisj，k值来自包装器Table.Row和Table.Column的映射，处理程序方法现在只是一个console.log。 呈现视图时，将在每个单元格上调用onClick。同样，在单击每个单元格时，没有任何反应。 如何在语义-UI-反应中选择单元格。

推荐答案

selectable道具仅控制呈现给单元格的语义UI类名，这些单元格为单元格提供样式。

在您要链接的文档中，它显示selectable属性使包含<a>标记的表格单元格将占据整个单元格空间，而不仅仅是它正在换行的文本。通过从示例中的<Table.Cell>组件中删除可选择的道具，您可以看到此更改的发生，并且您将看到文本甚至更改为链接颜色，并且只有文本可点击。

我建议您遵循示例中看到的标记，如果您想使用<Table.Cell selectable>，请将您的点击处理程序放在<Table.Cell selectable>中的<a>标记上(或者，如果您只想让文本可点击，请不要使用该道具)。

您遇到的另一个问题听起来像是您在Click处理程序类方法上没有任何绑定，因此当组件呈现时，您在其上使用处理程序的每一行都在调用该类方法。您需要向类方法添加绑定。我建议不要在组件中使用箭头函数进行绑定。相反，您应该绑定在构造函数中或直接绑定到类方法本身，如下所示：handleCellClick = (j,k) => {}。请注意，类方法有一个箭头函数来绑定它，而不仅仅是handleCellClick(j,k) {}。

这篇关于语义界面反应选择表单元格不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！