时间戳

首页 > 解决方案 > 猜测反应中的数字

javascript - 猜测反应中的数字

问题描述

我正在尝试在 React 中制作一个简单的猜数字游戏。

想法是：在函数中生成一个随机数generateRandom。然后在compare函数中，给一个变量（c）加1，直到玩家猜到数字，最后显示玩家需要猜的次数。

问题是：当我提交号码时，什么也没有发生。我得出的结论是问题一定出在函数中：generateRandom或 compare。

在这里我留下代码：

应用程序.js：

class App extends Component {  
  constructor(props) {
    super(props)
    this.generateRandom = this.generateRandom.bind(this)
    this.compare = this.compare.bind(this)
  }
  render() {
    return (
      <div onSubmit={this.compare}>
        <h1>GUESSING GAME</h1>
        <p>Enter a number: 
          <input type="number" name="num" />
        </p>
        <button type="submit" value="submit">Guess</button>
      </div>
    );
  }
  
  generateRandom(v) {
    v = Math.trunc(Math.random() *10);
  }

  compare(e) {
    e.preventDefault();
    let v = 0;
    this.generateRandom(v);
    let c = 0;
    const n = parseInt(e.target.num.value); 
    if ( n === v) {
      c++;  
      alert("Nice, you guessed it in " + c + "attempts");
    }
    else if (n > v) {
      c++;
      alert("Nope, the number is smaller");
    }
    else if (n < v) {
      c++;
      alert("Nope, the number is bigger");
    }
  }  
}

标签： javascriptreactjs

解决方案

您似乎对v.

// previously you were just mutating an argument without returning anything
generateRandom() {
  return Math.trunc(Math.random() *10);
}

compare(e) {
  e.preventDefault();
  // use that returned value here
  let v = this.generateRandom(v);
  ...

此外，正如另一位评论者提到的，divs 没有onSubmit事件，那只是为了forms。所以你可以用

<form onSubmit={this.compare}>
  ...
</form>

或者您可以更改您button的使用onClick处理程序

<button onClick={this.compare}>Guess</button>

推荐阅读