在Material-UI单选< Table>中，如何实现行内控件? [英] In a Material-UI single-select <Table>, how does one implement in-row controls?

问题描述

我正在单选表的每一行中实现一个<IconMenu>. <Table onRowSelection=提供用于跟踪当前行的事件.不幸的是，如果用户首先选择该行，然后单击<IconMenu>，则该行首先将单击<IconMenu>视为取消选择，因此在触发<IconMenu><MenuItem onClick=时，没有选定的行.

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.

是否有一种干净的方法可以完全抑制单击行中的<IconMenu>时的行选择行为?

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

您认为我应该在 https://github.com/callemall/material- ui ?

推荐答案

您可以通过在每个包含<IconMenu>的事件中停止事件传播来解决此问题.为此，只需向每个包含<IconMenu>的onClick处理函数添加一个.像这样:

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>

这篇关于在Material-UI单选< Table>中，如何实现行内控件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！