React Material-UI 如何添加一个与 table 行点击分开的复选框

Question

我想区分复选框点击和行点击。

例如，我想要这个行为，当我点击复选框时，只有复选框被选中，当我点击行时，只有行被选中，但复选框没有被选中。我怎样才能做到这一点？

下面是我的代码

handleClick = (row) => {
var self = this;
var currentlist = self.state.routelist;

let newarray = [...this.state.routelist];

if (newarray[row].isselected === true) {
  newarray[row].isselected = false;
} else if (newarray[row].isselected === false) {
  newarray[row].isselected = true;
}

self.setstate({ routelist: newarray });

if (!isnan(row)) 
{
    var pos = 
    {
      routeid: currentlist[row].routeid,
      isvisible: currentlist[row].isselected
    };

    var param = {
      receiver: "event_map",
      command: "show_route",
      data: pos
    };

    //console.log("show_route: " + param.data.routeid + " visible: " + param.data.isvisible);
    this.msgdispatcher.triggermessagedispatcher(param);

    //zoom to route
    if (currentlist[row].routeid != null ||currentlist[row].routeid != undefined) 
    {
      var param = {
        receiver: "event_map",
        command: "zoom_to_route",
        data: currentlist[row].routeid
      };

      //console.log("zoom_to_route: routeid=" + param.data);
      this.msgdispatcher.triggermessagedispatcher(param);
    }
}
}

这里是渲染方法

render() {
return (
  <div style={{ padding: "0px" }}>
    <div style={{ padding: "0px" }}>
    <Table  
        onCellClick={this.handleClick}
        height={window.innerHeight}
        multiSelectable={this.state.multiSelectable}
        selectable={this.state.selectable}
      >
        <TableBody 
          displayRowCheckbox={this.state.displayRowCheckbox}
          showRowHover={this.state.showRowHover}
          deselectOnClickaway={this.state.deselectOnClickaway}
          >
          {this.state.routeList.map((row, index) => (
            <TableRow
              key={index}
              style={{ backgroundColor: row.DistressColor }}
              selected={this.state.routeList[index].isSelected}
            >
              <TableRowColumn style={{ padding: "0px" }}>
                <ListItem
                  style={{ height: "80px" }}
                  primaryText={row.Description}
                  secondaryText={
                    <div>
                      <div>
                        {"Direction : " + row.EntryDirection + " > " + row.ExitDirection}
                      </div>
                      <div>{"Distance (meter) : " + row.Distance}</div>
                    </div>
                  }
                  secondaryTextLines={5}
                />
              </TableRowColumn>
            </TableRow>
          ))}
        </TableBody>
      </Table>
      <hr />
    </div>
  </div>
);
}

Answer 1

方法_#1

您可以使用 ListItem 的子组件：ListItemSecondaryAction

它提供了额外的操作元素，您可以在其中放置按钮，这些按钮不会受到主要 ListItem 单击事件的影响。

您可以将其作为名为 children 的道具传递给 ListItem，但请注意：

If a ListItemSecondaryAction is used it must be the last child.

参考：

API 共 ListItem
API 共 ListItemSecondaryAction
使用说明demo

示例来源：

<ListItem alignItems="flex-start" className={classes.listUnit} key={book.isbn}>
  <ListItemAvatar>
    <Avatar alt="Remy Sharp" src={url} />
  </ListItemAvatar>
  <ListItemText
    primary={book.title}
    secondary={
      <>...</>
    }
  />
  <ListItemSecondaryAction>
    <Tooltip title="Add to order" aria-label="add">
      <IconButton edge="end" aria-label="comments">
        <AddIcon />
      </IconButton>
    </Tooltip>
  </ListItemSecondaryAction>
</ListItem>;

在线试用：codesandbox

方法_#2

如果你不想使用Material-UI内部解决方案。

您可以简单地在您的父事件处理程序回调中添加一些自定义进程。

使用 stopPropagation() 来阻止子事件，然后在子事件上添加一个单独的点击事件就可以了。

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

event.stopPropagation();

React Material-UI 如何添加一个与 table 行点击分开的复选框

React Material-UI How can I add a checkbox which is separate from table row click

javascript

reactjs

checkbox

material-ui

material-table

方法_#1

方法_#2