在 React 中，单击按钮时，显示警报 5 秒，然后隐藏警报

Question

我们正在使用此 CSS，它用于 div（或任何使用 animate class 的元素）在 4 秒后消失的动画。

@keyframes FadeAnimation {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
.animate {
  animation: FadeAnimation 4s ease-in .1s forwards;
}

在反应中，我们有一个可以点击的按钮，当点击按钮时，animate class 被添加到我们的 Alert div（之前隐藏):

const [isUpdating, setIsUpdating] = useState(false)
const [showAlert, setShowAlert] = useState(false)
const handleButtonClick = async () => {
    setIsUpdating(true);

    // Axios request to update user info
    try {
        const updateUserObj = { fullName, email };
        const userId = ...;
        const updateResponse = await Axios.put(`/users/update/${userId}`, updateUserObj);
        
        // Set States Following Successful Login
        setIsUpdating(false);
        setShowAlert(true); // setting to true to display hte alert
    } catch (err) {
        setIsUpdating(false);
    }
};

return (
    <Button onClick={handleButtonClick}>
        {`${isUpdating ? 'Updating...' : 'Submit Button'}`}
    />
    <Alert
        className={`modal-alert ${showAlert ? 'animate' : ''}`}
        variant='success'
    >
        Your profile was updated
    </Alert>);
)

单击此按钮处理提交表单，更新我们数据库中用户的信息，它还通过将 showAlert 状态更新为 true 来显示警报，这会将 animate 添加为 class 处于警戒状态。

我们的问题是这种方法只适用于第一次点击按钮，但不适用于后续点击。首次单击该按钮时，showAlert 设置为 true，并且没有任何事情发生将其变回 false。 CSS 处理 4 秒后隐藏警报，但按钮不再可用。

// Get a hook function
const {useState} = React;

const Example = ({title}) => {
  const [isUpdating, setIsUpdating] = useState(false)
  const [showAlert, setShowAlert] = useState(false)
  const handleButtonClick = () => {
    setIsUpdating(true);
    setIsUpdating(false);
    setShowAlert(true); // setting to true to display hte alert
  };

  let alertClass = showAlert ? 'modal-alert animate' : 'modal-alert';
  let alertStyles = showAlert ? {} : { opacity: 0, visibility: 'hidden', pointerEvents: 'none' };
  return (
    <div>
      <div
        className='submit-button' 
        onClick={handleButtonClick}
      >
        Submit Button
      </div>
      <div
          className={alertClass}
          style={alertStyles}
          variant='success'
      >
          Your profile was updated
      </div>
    </div>
  )
};

// Render it
ReactDOM.render(
  <Example />,
  document.getElementById("react")
);

.modal-alert {
  border: 1px solid #222222;
}

.submit-button {
  cursor: pointer;
  background: blue;
  border-radius: 5px;
  padding: 10px 15px;
  color: white;
  font-size: 1em;
  &:hover {
    background: darkblue;
  }
}

@keyframes FadeAnimation {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
.animate {
  animation: FadeAnimation 4s ease-in .1s forwards;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 1

您可以利用 onAnimationEnd 合成事件来修改您的状态：

<Alert
  className={`modal-alert ${showAlert ? 'animate' : ''}`}
  variant='success'
  onAnimationEnd={() => setShowAlert(false)}
>

在 React 中，单击按钮时，显示警报 5 秒，然后隐藏警报

In React, on button click, display alert for 5 seconds, then hide alert

javascript

reactjs

onclick

form-submit

use-state