如何通过 MUI 编程方式展示“水波纹效果”?

Question

基本上就是这样。我想手动显示MUI按钮集合上的涟漪效果 - 当我点击按钮时，涟漪效果会起作用，但我找不到一种以编程方式显示涟漪效果的方法。

我需要禁用MUI的涟漪效果，然后创建自己的涟漪效果函数，并将其附加到onClick上吗？

{this.buttons.map((button) => (
    <React.Fragment key={button.name}>
        {button.render ? (
                <div className="col-3">
                    <Button
                        autoFocus={true}
                        className="w-100 p-3"
                        variant="contained"
                        color="primary"
                        classes={{root: classes.button}}
                        disableElevation
                        onClick={() => {updateState(button.onClick(text))}}
                    >
                        {button.keyCode}
                    </Button>                               
                </div>
        ) : (<></>)}
    </React.Fragment>
))}

- zzmichalqq

Answer 1

Button 使用 ButtonBase，它在底层使用 TouchRipple。以下是 ButtonBase 的定义片段：

function ButtonBase(props) {
  // ...

  return (
    <ButtonBaseRoot>
      {children}
      <TouchRipple ref={rippleRef} center={centerRipple} {...TouchRippleProps} />
    </ButtonBaseRoot>
  )
}

没有 API 可以手动触发涟漪效果。它是在按钮内部处理的，因此要实现该效果，您需要创建和控制自己的 MUI 涟漪组件：

import TouchRipple from '@mui/material/ButtonBase/TouchRipple';

const rippleRef = React.useRef(null);
const buttonRef = React.useRef(null);
const triggerRipple = () => {
  const container = buttonRef.current;
  const rect = container.getBoundingClientRect();

  rippleRef.current.start(
    {
      clientX: rect.left + rect.width / 2,
      clientY: rect.top + rect.height / 2,
    },
    // when center is true, the ripple doesn't travel to the border of the container
    { center: false },
  );

  setTimeout(() => rippleRef.current.stop({}), 320);
};

return (
  <div>
    <Button onClick={triggerRipple}>start ripple</Button>
    <Box display="flex" justifyContent="center" m={10}>
      <Button
        variant="contained"
        color="primary"
        ref={buttonRef}
        sx={{ display: 'relative' }}
      >
        My little ripple
        <TouchRipple ref={rippleRef} center />
      </Button>
    </Box>
  </div>
);

演示

相关答案

• 是否可以在 div 上使用 mui 的触摸涟漪效果?

- NearHuscarl

---

可选地，通过 disableRipple 属性，可以禁用 Button 中的默认波纹，而是使用 TouchRipple 作为替代 - Merbin J Anselm