在我的 Reactjs 应用程序中，我想创建一个带有可选单元格的表格。单击每个单元格返回一个值。
根据documentation，我应该选择selectable。所以我定义如下：
<Table.Cell selectable key={j + k} onClick={this.handleCellClick(j, k)}> {j + k} </Table.Cell>
这个j,k 值来自包装器Table.Row 和Table.Column 的映射，处理程序方法现在只是一个console.log。
当视图被渲染时，onClick 在每个单元格上被调用。同样在单击每个单元格时，也没有任何反应。
我应该如何在语义 UI 反应中选择一个单元格。
【问题讨论】：
标签： reactjs semantic-ui semantic-ui-react
selectable 属性仅控制语义 UI 类名，这些类名会呈现给赋予其样式的单元格。
在您链接到的文档中，它显示 selectable 属性使包含 <a> 标记的表格单元格将占据单元格的全部空间，而不仅仅是它所包装的文本。您可以通过从示例中的 <Table.Cell> 组件之一中删除 selectable 属性来看到这种变化，您会看到文本甚至更改为链接颜色，并且只有文本是可点击的。
如果您想使用该道具，我建议您按照您在示例中看到的标记并将您的点击处理程序放在 <Table.Cell selectable> 内的 <a> 标记上（或者如果您不使用该道具你只希望文本是可点击的）。
您遇到的另一个问题是您的单击处理程序类方法没有任何绑定，因此当组件呈现时，您使用处理程序的每一行都在调用该类方法。您需要将绑定添加到类方法。我建议不要在组件内使用箭头函数进行绑定。相反，您应该在构造函数中或直接在类方法本身上绑定，如下所示：handleCellClick = (j,k) => {}。请注意，类方法有一个绑定它的箭头函数，而不仅仅是handleCellClick(j,k) {}。
【讨论】：