reactjs - 是否可以在 div 上使用 MUI 的触摸波纹效果？

Question

我已经阅读了类似问题的不同答案，但它们都很旧，似乎在最新版本的 MUI 中不起作用。
我需要在 div 上应用触摸波纹效果，但我不能使用按钮或 ButtonBase元素，因为其中还有另一个按钮。
提前感谢您的回复。

Answer 1

是的，您可以使用 TouchRipple来模拟涟漪效应。此组件未记录，但您可以在 ButtonBase 中查看它的使用方式。并学会自己使用它。
首先，您需要将 ref 传递给 TouchRipple并调用ref.current.start(e)或 ref.current.stop(e)当您想分别启动或停止效果时。e是事件对象。当您调用 start(e) ，它需要鼠标或触摸位置(来自 mousedown 或 touchstart 事件)才能知道从哪里开始涟漪效果( Source )。您可以通过设置 center 来覆盖此行为。支持 true ，这使得涟漪效应总是从中间开始。
以下是帮助您入门的最低工作示例:

function App() {
  const rippleRef = React.useRef(null);
  const onRippleStart = (e) => {
    rippleRef.current.start(e);
  };
  const onRippleStop = (e) => {
    rippleRef.current.stop(e);
  };

  return (
    <div
      onMouseDown={onRippleStart}
      onMouseUp={onRippleStop}
      style={{
        display: "inline-block",
        padding: 8,
        position: "relative",
        border: "black solid 1px"
      }}
    >
      Button
      <TouchRipple ref={rippleRef} center={false} />
    </div>
  );
}

现场演示