Блог

Я пытаюсь создать простую игру с угадыванием чисел в React.

Идея заключалась в следующем: сгенерировать случайное число в функции generateRandom . Затем в compare функции добавьте 1 к переменной ( c ), пока игрок не угадает число и, наконец, покажет количество попыток, которые игроку понадобились, чтобы угадать его.

Проблема в том, что когда я отправляю номер, ничего не происходит. Я пришел к выводу, что проблема должна быть в функции: generateRandom или compare .

Здесь я оставляю код:

App.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");
    }
  }  
}
  

Вы, кажется, немного смущены масштабом 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);
  ...
  

Кроме того, как упомянул другой комментатор, div у s нет onSubmit события, это только для form s . Таким образом, вы можете либо обернуть свой html с

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

или вы можете изменить свой button , чтобы использовать onClick обработчик

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

Только форма имеет событие отправки. Измените его из div в form:

 <form onSubmit={this.compare}>
  <h1>GUESSING GAME</h1>
  <p>
    Enter a number:
    <input type="number" name="num" />
  </p>
  <button type="submit" value="submit">     
   Guess
  </button>
</form>