React警告组件关闭按钮自动关闭

Question

我有一个警报React组件，使用了Bootstrap类。

以下是组件代码:

import React, { Component } from 'react';

class Alert extends Component {
  render() {
    return (
      <div>
        <div className="alert alert-warning alert-dismissible" role="alert">
          <button type="button" className="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          {this.props.text}
        </div>
      </div>
    );
  }
}

export default Alert;

它的功能很好，但我的问题是...

当我点击其中的关闭按钮时，如何使警报自动隐藏？

- user7801216

---

使用 state 来操作显示行为。使用 setTimeout 函数来改变 state。 - atom217

Answer 1

你可以通过状态变量来内部实现：

你可以通过状态变量来内部实现：

import React, { Component } from 'react';

class Alert extends Component {

  constructor(props, context) {
    super(props, context);
    this.state = {
      isActive: true,
    }
  }

  hideAlert() {
    this.setState({
      isActive: false,
    });
  }

  render() {
    if (this.state.isActive) {
      return (
          <div
            className="alert alert-warning alert-dismissible"
            role="alert"
          >
            <button
              type="button"
              className="close"
              data-dismiss="alert"
              aria-label="Close"
              onClick={() => this.hideAlert()}
            >
              <span aria-hidden="true">&times;</span>
            </button>
            {this.props.text}
          </div>
      );
    }
    return <div/>
  }
}

export default Alert;

- Shota

Answer 2

我用 d.lime 的建议更新了 AppsWithHeart 的代码。如果有更短（或更简单）的制作 if 语句的方法，请在评论中提出。

import React from "react";

function Alert() {
  const [showPopup, setShowPopup] = React.useState(false);

  const toggleShowInfoPopup = () => {
    setShowPopup(!showPopup);
  };

  return (
    <>
      {(() => {
        if (!showPopup) {
          return (
            <div className="alert alert-warning alert-dismissible" role="alert">
              <button
                type="button"
                className="close"
                data-dismiss="alert"
                aria-label="Close"
                onClick={toggleShowInfoPopup}
              >
                <span aria-hidden="true">&times;</span>
              </button>
              Test
            </div>
          );
        }
      })()}
    </>
  );
}

export default Alert;

- blackbull77

Answer 3

我知道这个问题不是今年的，但我发现它，可能会有更多的人在寻找它。

所以，我用一个hook来实现它作为一个函数组件。我在这个领域还是一个初学者，所以随意指出我的问题 - 这样我们就可以一起学习 :)

编辑：在这里，您可以切换弹出窗口，如果您只想关闭它，您可以使用setShowPopup函数来不进行切换，而是将其设置为false - 无论您需要什么都可以。

这是我的代码:

import React from 'react';

function Alert() {
    const [showPopup, setShowPopup] = React.useState(false);

const toggleShowInfoPopup = () => {
    setShowPopup(!showPopup);
  };

return (
  <div>
    <div className="alert alert-warning alert-dismissible" role="alert">
      <button 
        type="button" 
        className="close" 
        data-dismiss="alert" 
        aria-label="Close"
        onClick={toggleShowInfoPopup}
        >
        <span aria-hidden="true">&times;</span>
        </button>
      {this.props.text}
    </div>
  </div>
);
}

export default Alert;

- AppsWithHeart

---

有一个打字错误 OnClick={toggleShowPopup} 应该是 OnClick={toggleShowInfoPopup}。 - Philippe

否则切换将无法工作，您还应该根据“showPopup”的值进行渲染。 - d.lime