Javascript 我有两个onClick函数正在运行，一个紧接着一个，但没有运行

我为onClick、lotking和createAlert运行了两个函数。createAlert未创建警报。我做错了什么？另外，如果有人能告诉我如何将彩票功能改回以按钮Id作为参数，我会非常感激，因为当我将第二个函数添加到onClick时，它停止工作

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";
import Alert from "react-bootstrap/Alert";

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.createAlert = this.createAlert.bind(this);
    this.lottery = this.lottery.bind(this);
  }
  createAlert = () => {
    if (this.state.roundWinner === "User") {
      return (
        <Alert variant="success" dismissible>
          <Alert.Heading>Congrats!</Alert.Heading>
          <p>Nice Going Man, You won!</p>
          <hr />
          <p>
            The score is You:{this.state.userPoint} to PC:{this.state.pcPoint}
          </p>
        </Alert>
      ); 
    } else {
      return (
        <Alert variant="success" dismissible>
          <Alert.Heading>Too Bad!</Alert.Heading>
          <p>Better Luck Next Time!</p>
          <hr />
          <p>
            The score is You:{this.state.userPoint} to PC:{this.state.pcPoint}
          </p>
        </Alert>
      );
    }
  };

  lottery = (event, temp) => {
    const users_choice = event;
    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("Paper"); this.createAlert();}}
                  id="Paper"
                >
                  Paper
                </Button>{" "}
              </Col>
            </Row>
            <Row>
              <Col>
                <Button
                  className="myButton"
                  variant="outline-primary"
                  size="md"
                  onClick={() => { this.lottery("Rock"); this.createAlert();}}
                  id="Rock"
                >
                  Rock
                </Button>
              </Col>
            </Row>
            <Row>
              <Col>
                <Button
                  className="myButton"
                  variant="outline-primary"
                  size="md"
                  onClick={() => { this.lottery("Scissors"); this.createAlert();}}
                  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 React，{Component}来自“React”；
从“/ResultInfo”导入反应信息；
从“反应引导/按钮”导入按钮；
从“react引导/容器”导入容器；
从“反应引导/行”导入行；
从“反应引导/Col”导入Col；
从“反应引导/警报”导入警报；
类计数器扩展组件{
建造师（道具）{
超级（道具）；
此.state={
计数：10，
冉：“，
id:“”，
温度：数学地板（数学随机（）*3+1），
用户点：0，
点:0,，
整数限制：10，
最终获胜者：“
};
this.createAlert=this.createAlert.bind（this）；
this.lotking=this.lotking.bind（this）；
}
createAlert=（）=>{
if（this.state.roundWinner==“用户”）{
返回(
恭喜！
好家伙，你赢了



分数是您：{this.state.userPoint}到PC:{this.state.pcPoint}

); 
}否则{
返回(
太糟糕了！
祝你下次好运



分数是您：{this.state.userPoint}到PC:{this.state.pcPoint}

);
}
};
彩票=（事件，临时）=>{
const users_choice=事件；
this.setState（{id:users\u choice}）；
const PC_choice=[“纸”、“石头”、“剪刀”][
Math.floor（Math.random（）*3）
];
this.setState（{ran:PC_choice}）；
console.log（“pc；state=，this.state.ran，”但variable=，pc_choice）；
console.log（“user:state=，this.state.id，“but variable=，users\u choice”）；
如果(
（用户选择==“纸张”和PC选择==“摇滚”）||
（用户选择==“摇滚”和PC选择==“剪刀”）||
（用户选择==“剪刀”和PC选择==“纸”）
) {
this.setState（（{userPoint，roundWinner}）=>({
userPoint:userPoint+1，
圆奖得主：“用户”
}));
}else if（用户选择===PC选择）{
this.setState（（{roundWinner}）=>({
第二轮冠军：“平局”
}));
}否则{
this.setState（（{pcPoint，roundWinner}）=>({
pcPoint:pcPoint+1，
获奖者：“个人电脑”
}));
}
};
渲染（道具）{
返回(
石头、布、剪刀
选择你的武器
{this.lotking（“Paper”）；this.createAlert（）；}
id=“纸张”
>
纸张
{" "}
{this.lotking（“Rock”）；this.createAlert（）；}
id=“岩石”
>
摇滚乐
{this.lotking（“剪刀”）；this.createAlert（）；}
id=“剪刀”
>
剪刀
);
}
}
导出默认计数器；

您的

createAlert

函数在

onClick

回调中被调用，它在该回调中返回警报jsx，这就是为什么您的警报没有在组件中呈现的原因

在

彩票

中，有5个

设置状态

语句，它违反了干式原则。
你应该试试这个：

。。。
类计数器扩展组件{
建造师（道具）{
超级（道具）；
此.state={
计数：10，
冉：“，
id:“”，
温度：数学地板（数学随机（）*3+1），
用户点：0，
点:0,，
整数限制：10，
最终获胜者：“
};
this.lotking=this.lotking.bind（this）；
}
彩票=（事件，临时）=>{
const users_choice=事件；
让userPoint=this.state.userPoint，pcPoint=this.state.pcPoint，roundWinner=this.state.roundWinner
const PC_choice=[“纸”、“石头”、“剪刀”][
Math.floor（Math.random（）*3）
];
如果(
（用户选择==“纸张”和PC选择==“摇滚”）||
（用户选择==“摇滚”和PC选择==“剪刀”）||
（用户选择==“剪刀”和PC选择==“纸”）
) {
用户点+=1
roundWinner=“用户”
}else if（用户选择===PC选择）{
roundWinner=“抽签”
}否则{
Pc点+=1
roundWinner=“PC”
}
setState（{id:users\u choice，ran:PC\u choice，userPoint，pcPoint，roundWinner}）；
};
渲染（道具）{
返回(
{
this.state.roundWinner==“用户”？
(
恭喜！
好家伙，你赢了



分数是您：{this.state.userPoint}到PC:{this.state.pcPoint}

) : (
太糟糕了！
祝你下次好运



分数是您：{this.state.userPoint}到PC:{this.state.pcPoint}

)
}
石头、布、剪刀
选择你的武器
{这张彩票（“纸”）}
id=“纸张”