语义ui反应选择表单元不起作用

Question

在我的Reactjs应用中，我想创建一个带有可选单元格的表。在每个单元格上单击返回我一个值。 根据{{​​3}}，我应该只选择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反应中选择一个单元格。

Answer 1

selectable道具仅控制语义UI类名称，这些语义UI类名称将呈现到为其赋予样式的单元格中。

在要链接的文档中，它表明selectable道具使包含<a>标签的表格单元格将占据单元格的全部空间，而不仅仅是文本包装。您可以通过从示例中的<Table.Cell>个组件中删除一个可选的prop来看到此更改，并且您会看到文本甚至变为链接颜色，并且只有文本是可单击的。

我建议您遵循示例中看到的标记，并将点击处理程序放置在<a>内的<Table.Cell selectable>标签上（如果您想使用该道具，如果只希望文本可点击，请使用道具。

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