javascript - 如何在反应材料列表中禁用对主要动作的连锁反应

Question

我试图在列表组件的左端和右端有两个操作按钮。

• 点击secondary action (right side delete icon)波纹仅限于唯一的图标。

• 点击primary action(left delete icon)涟漪效果在整行上。

预期行为：

我想要主按钮上的涟漪效果，类似于次要操作按钮的效果。
重要的是，我不能禁用文本涟漪效应作为临时解决方案。

代码示例：

代码沙盒链接

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";

import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import DeleteIcon from "@material-ui/icons/Delete";
import IconButton from "@material-ui/core/IconButton";

const useStyles = makeStyles((theme) => ({
  root: {
    width: "100%",
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper
  }
}));

export default function SelectedListItem() {
  const classes = useStyles();
  const [selectedIndex, setSelectedIndex] = React.useState(1);

  const handleListItemClick = (event, index) => {
    setSelectedIndex(index);
  };

  return (
    <div className={classes.root}>
      <List component="nav" aria-label="main mailbox folders">
        <ListItem
          button
          selected={selectedIndex === 0}
          onClick={(event) => handleListItemClick(event, 0)}
        >
          <ListItemIcon>
            <IconButton edge="end" aria-label="delete">
              <DeleteIcon />
            </IconButton>
          </ListItemIcon>
          <ListItemText primary="Inbox" />
          <ListItemSecondaryAction>
            <IconButton edge="end" aria-label="delete">
              <DeleteIcon />
            </IconButton>
          </ListItemSecondaryAction>
        </ListItem>
        <ListItem
          button
          selected={selectedIndex === 1}
          onClick={(event) => handleListItemClick(event, 1)}
        >
          <ListItemIcon>
            <IconButton edge="end" aria-label="delete">
              <DeleteIcon />
            </IconButton>
          </ListItemIcon>
          <ListItemText primary="Drafts" />
          <ListItemSecondaryAction>
            <IconButton edge="end" aria-label="delete">
              <DeleteIcon />
            </IconButton>
          </ListItemSecondaryAction>
        </ListItem>
      </List>
    </div>
  );
}

Answer 1

我认为这是因为用于向按钮添加辅助操作，因此当您单击辅助操作区域时，它会阻止 primaryAction 发生。因此，在您的情况下，当您单击右侧图标时，它包含 ListItemSecondaryAction 区域内的波纹影响。如果你想禁用 List 上的涟漪，你可以在 ListItem 上添加 prop 'disableRipple' ，它将被禁用，但如果你想要它有条件，即。当用户点击图标时，波纹应该只发生在图标上，如果只点击按钮中的按钮，那么您可以尝试在点击按钮时停止传播（可能不起作用），但您可以尝试一下。

我创建了一个与您共享代码和框链接的工作

https://codesandbox.io/s/material-demo-forked-i7k7e?file=/demo.js

        <ListItem
          button
          disableRipple
          selected={selectedIndex === 0}
          onClick={(event) => handleListItemClick(event, 0)}
          style={{ position: "relative" }}
        >
          <div style={{ zIndex: 1 }}>
            <ListItemIcon>
              <IconButton edge="end" aria-label="delete">
                <DeleteIcon />
              </IconButton>
            </ListItemIcon>
            <ListItemText primary="Inbox" />
            <ListItemSecondaryAction>
              <IconButton edge="end" aria-label="delete">
                <DeleteIcon />
              </IconButton>
            </ListItemSecondaryAction>
          </div>
          <ButtonBase
            style={{
              position: "absolute",
              bottom: 0,
              top: 0,
              left: 0,
              right: 0,
              width: "100%",
              zIndex: 0
            }}
          />
        </ListItem>