Question

我的前端有React，后端有Express，我想在注册/登录页面上使用sweetalerts2。我尝试在Internet上搜索有关凭据错误时如何使用sweetalerts2显示错误警报的信息，但找不到任何东西。有人可以阐明这一点吗？

Answer 1

您可以使用Avertising dataset软件包，就像在此sweetalert2-react-content中一样：

import React from "react";
import ReactDOM from "react-dom";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";

const MySwal = withReactContent(Swal);

class App extends React.Component {

  myAwesomeLoginFunction() {
    // make your API call here.
    // let's say it returns a status code of 200 if the login credentials are correct
    const status = 200;

    if (status === 200) {
      MySwal.fire({
        title: <p>Hello World</p>,
        type: "success",
        customClass: "animated tada"
      });
    } else {
      MySwal.fire({
        title: <p>Wrong password/email</p>,
        type: "error",
        customClass: "animated tada"
      });
    }
  }

  render() {
    return (
      <div className="App">
        <h2>Hello world!</h2>
        <button onClick={this.myAwesomeLoginFunction.bind(this)}>Login</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

还有其他针对sweetAlert2的React包装器，例如：

通过API调用使用sweetalerts2

1 个答案: