如何在 React.js 中的函数期间创建警报？答案

【问题标题】：How can I create an alert during a function in React.js?如何在 React.js 中的函数期间创建警报？
【发布时间】：2020-10-04 09:28:18
【问题描述】：

在用 Vanilla JS 构建一个之后，我正在用 React.js 构建一个石头剪刀布应用程序。我已经完成了第一版，但我正在尝试添加在做出选择并运行函数时弹出的警报（使用 React-bootstrap）。我试过把它放在几个地方，但我不知道把它放在哪里。

import React, { Component } from "react";
import ReactInfo from "./ResultInfo";
import Button from "react-bootstrap/Button";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";

class Counter extends Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 10,
      ran: "",
      id: "",
      temp: Math.floor(Math.random() * 3 + 1),
      userPoint: 0,
      pcPoint: 0,
      roundLimit: 10,
      roundWinner: ""
    };

    this.lottery = this.lottery.bind(this);
  }

  lottery = (event, temp) => {
    const users_choice = event.currentTarget.id;
    this.setState({ id: users_choice });
    const PC_choice = ["Paper", "Rock", "Scissors"][
      Math.floor(Math.random() * 3)
    ];
    this.setState({ ran: PC_choice });
    console.log("pc; state =", this.state.ran, "but variable =", PC_choice);
    console.log("user: state =", this.state.id, "but variable =", users_choice);
    if (
      (users_choice === "Paper" && PC_choice === "Rock") ||
      (users_choice === "Rock" && PC_choice === "Scissors") ||
      (users_choice === "Scissors" && PC_choice === "Paper")
    ) {
      this.setState(({ userPoint, roundWinner }) => ({
        userPoint: userPoint + 1,
        roundWinner: "User",

      }

      ));
    } else if (users_choice === PC_choice) {

      this.setState(({ roundWinner }) => ({
        roundWinner: "Draw"
      }));

    } else {
      this.setState(({ pcPoint, roundWinner }) => ({
        pcPoint: pcPoint + 1,
        roundWinner: "PC"
      }));

    }
  };

  render(props) {
    return (
      <>
        <div className="container">
          <Container fluid>
            <Row>
              <Col>
                <h5>Rock, Paper, Scissors</h5>
              </Col>
            </Row>
            <Row>
              <Col>
                <h6> Select Your Weapon </h6>
              </Col>
            </Row>
            <Row>
              <Col>
                <Button
                  className="myButton"
                  variant="outline-primary"
                  size="md"
                  onClick={this.lottery}
                  id="Paper"
                >
                  Paper
                </Button>{" "}
              </Col>
            </Row>
            <Row>
              <Col>
                <Button
                  className="myButton"
                  variant="outline-primary"
                  size="md"
                  onClick={this.lottery}
                  id="Rock"
                >
                  Rock
                </Button>
              </Col>
            </Row>
            <Row>
              <Col>
                <Button
                  className="myButton"
                  variant="outline-primary"
                  size="md"
                  onClick={this.lottery}
                  id="Scissors"
                >
                  Scissors
                </Button>
              </Col>
            </Row>
          </Container>
        </div>

        <ReactInfo
          id={this.state.id}
          ran={this.state.ran}
          roundWinner={this.state.roundWinner}
          userPoint={this.state.userPoint}
          pcPoint={this.state.pcPoint}
        />
      </>
    );
  }
}

export default Counter;

【问题讨论】：

什么是事件监听器和组件
import Alert from 'react-bootstrap/Alert' 我不确定你所说的事件监听器是什么意思，你的意思是按钮，启动函数的 onClick？
您能否详细说明您面临的问题？

标签： javascript reactjs

【解决方案1】：

将 AlertComponent 保留在根组件本身内，以便覆盖适用于整个窗口。还要将它包装在一个最初保持为 false 的标志中，并仅在需要显示时将其设置为 true。

        showAlert=()=>{
          this.setState({showAlert:true})
         }render(){
         {this.state.showAlert && <AlertComponent>}
        }

【讨论】：