如何使用 React 中的点击事件更改不透明度？

Question

我正在尝试更改下方跨度的不透明度，以便向用户显示文本已被复制。

在点击 copyToClipboard 之前 => 不透明度：0 单击后 => 不透明度：1 约 1 秒，然后再次变为 opacity:0

我知道 onCopy={timer} 行不通，但我真的不知道该怎么做。

import React, { useState, useEffect } from "react"
import { CopyToClipboard } from "react-copy-to-clipboard"

const Contact = () => {
  const [style, setStyle] = useState({ opacity: 0 })

  useEffect(() => {
    const timer = setTimeout(function () {
      setStyle({ opacity: 1 })
    }, 1000)
  }, [])

  return (
        <div>
          <CopyToClipboard text='something' onCopy={timer}>
            <LogoImage />
          </CopyToClipboard>
          <span style={style}>
            copied!
          </span>
        </div>

Answer 1

我认为在这种情况下您不需要 useEffect。只需在 useEffect 之外创建 timer 函数，如下所示：-

import React, { useState, useEffect } from "react"
import { CopyToClipboard } from "react-copy-to-clipboard"

const Contact = () => {
  const [style, setStyle] = useState({ opacity: 0 })

 const timer = () => {
    setStyle({ opacity: 1 });
    setTimeout(() => {
      setStyle({ opacity: 0 });
    }, 1000);
  };

  return (
        <div>
          <CopyToClipboard text='something' onCopy={() => timer()}>
            <LogoImage />
          </CopyToClipboard>
          <span style={style}>
            copied!
          </span>
        </div>
       )

Answer 2

我个人不会将计时器用于 UI 更新 - 永远不会。它确实有效（在这种情况下），但它并不干净。我建议使用 CSS 和过渡或动画。 Removing/clearing onAnimationEnd 中的 class 名称确保每次单击时都会触发动画。动画持续时间设置为 1,4s，其中 (0,2/1,4) = 14,29% 用于淡入，14,29% 用于淡出，剩下 1s 用于显示跨度

CSS:

.copied {
  opacity: 0;
  display:none;
}

.flash {
  display:inline-block;
  animation: flash 1.4s ease-in-out both;
}

@keyframes flash {
  0: {
    opacity: 0;
  }
  
  14.29% {
    opacity: 1;
  }
  
  85.71% {
    opacity: 1;
  }
  
  100% {
    opacity: 0
  }
}

（简化您的示例以删除对剪贴板的依赖）：

const Contact = () => {
  const [flash, setFlash] = React.useState("")

  const onClick = (event) => {
    setFlash("flash");
  }
  
  const onAnimationEnd = (event) => {
    setFlash("");
  }

  return (
        <div onClick={onClick}>
            Something
          <span className={`copied ${flash}`} onAnimationEnd={onAnimationEnd}>
            copied!
          </span>
        </div>
    )
}

就像在您的示例中一样，这有一个缺点，即元素必须一直存在（即使现在 display:none 从渲染中移除）。

一个更好的方法是使用惊人的 TransitionGroup/CSSTransition 从 react-transition-group 到 add/remove 元素。不可否认，这个例子有点多，但总的来说是更好更干净的方法。

Answer 3

除了使用 setTimeout，您可以使用简单的 CSS 动画来实现以下 -

使用关键帧创建 CSS 动画
创建一个状态来触发动画并在复制时改变状态。就是这样。

检查这里的代码，参考- https://codesandbox.io/s/festive-northcutt-kb32u?file=/src/App.js

如何使用 React 中的点击事件更改不透明度？

How to change opacity with clickEvent in React?

settimeout

reactjs