Javascript 当我使用任何一个把手舔时，另一个把手舔火

我正在尝试建立一个猜数字游戏。 我写了一个按钮来猜测一个数字，一个按钮来生成一个随机数，还有一个按钮来比较猜测的数字和生成的数字。 当我单击guess number按钮时，handleClickCompare方法启动，我在其中获得console.log。每次启动handleChange时，handleClickCompare也会启动。有时，但不是每次我按下“猜测”按钮时，都会生成一个新的随机数。 发生了什么事

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={guess:0，gen:0}
}
手变（猜，e）{
this.setState（{guess:e.target.value}）；
console.log（this.state）；
}
//手变（猜测、事件）{
//this.setState（[猜测]：event.target.value）；
//console.log（this.state）；
// }
handleClick（猜，e）{
this.setState（{guess:e.target.value}）；
console.log（this.state）；
}
handleClickGen（gen，e）{
this.setState（{gen:Math.floor（Math.random（）*10）}）；
console.log（this.state）；
}
handleClickCompare（猜测，gen）{
if（gen*/}
{/*  */}
猜{'}
生成一个数字{'}
比较{'}
);
}
}
导出默认应用程序编写onClick处理程序的方式使它在每次呈现组件时运行，而不仅仅是onClick

例如，你应该写如下：

onClick={() => this.handleClick.bind(this, "guess")}>

根据正确的注释进行更新：最后一个处理程序中缺少绑定
 我想你忘了在这里绑定：

 <button type="button"
      onClick={this.handleClickCompare.bind(this.state.guess, this.state.gen)}>
      compare{" "}
    </button>


比较{'}

请查找代码沙盒-
您的代码中存在一些问题和一些错误做法。让我们从回调函数开始

this.handleChange.bind(this, "guess")

handleChange(guess, e) {
    this.setState({guess: e.target.value});
    console.log(this.state);
}

您不需要像这样绑定函数。这是不必要的，因为即使通过引用使用它，也可以获得
事件
参数。此外，还可以在类构造函数中绑定函数以使用
this
。如果像这样绑定函数，则会在每次渲染中重新创建它们

this.handleClickCompare(this.state.guess, this.state.gen)

对于这一个，有两个问题。首先，您不需要为这个函数提供参数。您可以从函数定义中的状态获取这些参数。这是没有必要的。第二个问题是您正在立即调用此函数，而不是将其与回调一起使用。您可以将其与箭头功能一起使用：

() => this.handleClickCompare()

但同样，这是不必要的。您可以通过引用使用它，并从状态获取参数

另一个问题是
handleChange
函数

this.handleChange.bind(this, "guess")

handleChange(guess, e) {
    this.setState({guess: e.target.value});
    console.log(this.state);
}

从您的输入中，您将获得一个字符串，并将其设置为状态，而不是与数字进行比较。因此，使用
Number（）
设置一个数字

this.setState({ guess: Number(e.target.value) });

您的
handleClickGen
函数实际上每次生成一个数字时都会生成，但有时您认为不是

this.setState({gen: Math.floor(Math.random()*10)});

这是因为您有时会看到
0
，对吗？原因是您的函数生成0-9之间的数字。因此，当您的数字类似于
0，…
时，您的函数将其限定为0。所以，像这样改变它

this.setState({ gen: Math.floor(Math.random() * 9) + 1 });

您的
handleClickCompare
逻辑有点错误，请将其更改为：

handleClickCompare() {
  const { guess, gen }  = this.state;
  console.log( guess, gen );
  if (guess < gen) {
    console.log("guess lower");
  } else if (guess > gen) {
    console.log("guess higher");
  } else {
    console.log("You got it chief");
  }
}


您也可以使用bind。这是正确的语法。问题不在于绑定，而在于您传递了一个参数。没有参数onClick={this.handleClick.bind（this）}就可以了，有了参数，您需要我的回复中提供的语法。传递参数的语法是正确的。请查看官方文档-哦，对了。每天都在学习新的东西：）但是你在上一个函数中没有使用bind…@Yossi在这里不是在谈论绑定，我想。OP会立即调用该函数，这就是为什么它会在第一次渲染中运行，而不是在单击时运行。所以，尤西的建议解决了这个问题。但同样，此函数也会在每次渲染中重新创建（不运行，重新创建）。他没有在
handleClickCompare
中使用this.state。那么他是否需要将该函数绑定到？每当我们传递任何参数时，我们都需要使用arrow函数或绑定语法。我已经用handleClickCompare中添加的bind代码更新了答案。否则该函数将始终正常运行。但是我使用
handleClickCompare
运行您的代码时没有绑定，这很完美。是吗？该函数始终正确运行。您可以看到控制台日志。实际上，OP不需要像这里那样直接使用任何参数。此外，JSX道具中的绑定函数会在每次渲染中重新创建函数。这里的函数参考已经足够了。阿里，请告诉我们下面的解决方案是否有效？