javascript - React Material-UI 如何添加与表行单击分开的复选框

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 的 props 传递给 ListItem，但请注意:

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

<小时/>

引用:

• API ListItem

• ListItemSecondaryAction 的 API

• 使用文档 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();