Question

我有一个使用bootstrap类的alert react组件。

以下是组件代码：

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;

它工作正常，但我的问题是......

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

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;

Answer 2

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

因此，我将其作为带有钩子的功能组件来完成。我仍然是该领域的初学者，请随时向我指出……-我们可以一起学习：）

编辑：在这里您可以切换弹出窗口，如果您只想关闭它，则可以使用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;

反应警报组件关闭按钮自我关闭

2 个答案: