问题
in my Reactjs App, I want to create a table with selectable cells. on clicking on each cell return me a value.
according to the documentation, I should just choose selectable. so I have defined like:
<Table.Cell selectable key={j + k} onClick={this.handleCellClick(j, k)}> {j + k} </Table.Cell>
this j,k values are coming from the mapping of the wrapper Table.Row, and Table.Column, and the handler method is just a console.log now.
when the view is rendered, the onClick is called on each cell. also on clicking each cell, nothing happens.
how should I select a cell in semantic-ui-react.
回答1:
The selectable prop only controls the Semantic UI class names that get rendered to a cell which are giving it a style.
In the documentation that you are linking to, it shows that the selectable prop makes a table cell containing an <a> tag will take up the full space of the cell instead of just the text it is wrapping. You can see this change happen by removing the selectable prop from one of those <Table.Cell> components in the example and you'll see that the text even changes to a link color and only the text is clickable.
I'd recommend that you follow the markup you see in the example and put your click handler on an <a> tag inside of a <Table.Cell selectable> if you want to use that prop (or don't use the prop if you want only the text to be clickable).
The other issue you are having it sounds like is that you do not have any binding on your click handler class method so when the component renders, every single row you use the handler on is calling that class method. You need to add binding to class method. I'd recommend against binding with an arrow function inside your component. Instead you should bind in a constructor or directly on the class method itself like this: handleCellClick = (j,k) => {}. Notice that the class method has an arrow function binding it instead of just handleCellClick(j,k) {}.
来源：https://stackoverflow.com/questions/52068492/semantic-ui-react-select-table-cells-not-working