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

Method_ # 1

Вы можете использовать дочерний компонент ListItem: ListItemSecondaryAction

Он предоставляет дополнительный элемент действия, который можно использовать для размещения кнопок , которое не будет затронуто основным событием ListItem click.

Вы можете передать это как реквизит с именем children в ListItem, но обратите внимание:

Если используется ListItemSecondaryAction, это должен быть последний дочерний элемент.

---

См .:

• API ListItem

• API ListItemSecondaryAction

• документация по использованию демо

---

Источник выборки:

<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

---

Method_ # 2

Если Вы не хотите использовать внутреннее решение Material-UI.

Вы можете просто добавить некоторые настраиваемые процессы в обратный вызов родительского обработчика событий.

Использовать stopPropagation () чтобы предотвратить дочернее событие, добавьте отдельное событие щелчка для дочернего события.

Метод stopPropagation() интерфейса событий предотвращает дальнейшее распространение текущего события на этапах захвата и всплытия.

event.stopPropagation();