In a Material-UI single-select <Table>, how does one implement in-row controls?

问题

I'm implementing an <IconMenu> in each row of a single-select table. <Table onRowSelection= provides an event for tracking the current row. Unfortunately, if the user first selects the row, then clicks on the <IconMenu> the row first sees the click on the <IconMenu> as a deselect, so there's no selected row when the <IconMenu><MenuItem onClick= fires.

I've hacked around some of this (retaining the last-seen selection), but there are still issues; in particular, the row highlight is gone, so the user may be unsure which row they clicked on.

Is there a clean way to inhibit the row-selection behavior altogether when the <IconMenu> in the row is clicked on?

Do you think I should write up an issue on https://github.com/callemall/material-ui?

回答1:

You can work around this behavior by stopping the event propagation in each that contains an <IconMenu>. In order to do this just add a with an onClick handler to each that contains an <IconMenu>. Something like this:

<TableRowColumn>
    <div onClick={(e) => {e.stopPropagation()}}><IconMenu></div>
</TableRowColumn>

来源：https://stackoverflow.com/questions/38110341/in-a-material-ui-single-select-table-how-does-one-implement-in-row-controls