1

我有以下 React 示例，每次 isShowing 状态为真时，我都试图显示成功的祝酒词（来自 mdbootstrap 库）。对于 toast，这可以按预期工作，但是按钮旁边会显示一个数字，并在每次单击后递增。此数字也显示为 App 文件中主 div 的子项（请参阅附加的图像和代码框链接）。提前致谢！

import React, { Component } from "react";
import Nav from "./Navbar";
import Routes from "./Routes";
import Mes from "./Message";
import { Button, toast } from "mdbreact";
import "./App.css";

class App extends Component {
  state = {
    isShowing: false
  };

  handleClick = () => {
    this.setState({
      isShowing: true
    });
  };

  render() {
    return (
      <div className="App">
        <Mes />
        <Button color="primary" onClick={this.handleClick}>
          show Alert{" "}
        </Button>
        {this.state.isShowing ? toast.success("Success message") : ""}
        <Routes />
      </div>
    );
  }
}

export default App;

代码沙盒链接： https ://codesandbox.io/s/l2xqplx4rm

在此处输入图像描述

4

1 回答 1

2

您不需要toast.success在代码中呈现。消除

{this.state.isShowing ? toast.success("Success message") : ""}

在上面的代码案例中，您绑定了 toast 的toast.success方法响应，这不过是活动的 toast 长度。所以它在那边的显示号码。

就在下面的代码足以在按钮单击时显示吐司。

import React, { Component } from "react";
import Nav from "./Navbar";
import Routes from "./Routes";
import Mes from "./Message";
import { Button, toast } from "mdbreact";
import "./App.css";

class App extends Component {

  handleClick = () => {
     //show toast
     toast.success("Success message");
  };

  render() {
    return (
      <div className="App">
        <Mes />
        <Button color="primary" onClick={this.handleClick}>
          Show Alert
        </Button>
        <Routes />
      </div>
    );
  }
}

export default App;

这是更新的代码

于 2018-10-27T08:54:01.213 回答