ReactJS «угадай число»

Question

Я создал очень простую игру «Угадай число» с ReactJS, которая, кажется, работает хорошо, за исключением того, что она запускается, когда пользователь меняет ввод, а не при нажатии кнопки, как я ожидал.

Что я делаю не так?

Демо: https://codesandbox.io/s/guess-the-number-game-82z1n

Код

import React, {useState} from 'react';

let randomNumber = Math.round(Math.random() * 10);

const GuessTheNumber = () => {

const [value, setValue] = useState('');
const onChange = e => setValue(e.target.value);
let results = "";

const onClick = () => { 
    // check users guess against randonNumber
    const userGuess = value;
    if (userGuess == "") return null;
    if (userGuess == randomNumber ) return <p className="alert alert-success">Correct!</p>;
    if (userGuess > randomNumber) return <p className="alert alert-warning">Too high, guess again</p>;
    if (userGuess < randomNumber) return <p className="alert alert-warning">Too low, guess again</p>        
}

results = onClick(value)

return (
    <>
        <h2>Guess The Number game</h2>
        <p className="lead">Guess a number between 1 and 10.</p>
        <input value={value} type="number" onChange={onChange}/>
        <button type="submit" onClick={onClick}>GUESS</button>
        <br /><br />
        {results}

    </>
)
}

export default GuessTheNumber;

Answer 1

Вы можете установить результаты в качестве состояния и обновить его на onClick и использовать else ... if для проверки

const [results, setResult] = useState("");

const onClick = () => {
    // check users guess against randonNumber
    const userGuess = value;
    if (userGuess == randomNumber)
      setResult(<p className="alert alert-success">Correct!</p>);
    else if (userGuess > randomNumber)
      setResult(<p className="alert alert-warning">Too high, guess again</p>);
    else if (userGuess < randomNumber && userGuess !== "")
      setResult(<p className="alert alert-warning">Too low, guess again</p>);
    else setResult("");
  };

  return (
    <>
      <h2>Guess The Number game</h2>
      <p className="lead">Guess a number between 1 and 10.</p>
      <input value={value} type="number" onChange={onChange} />
      <button type="submit" onClick={onClick}>
        GUESS
      </button>
      <br />
      <br />
      {results}
    </>
  );

проверить здесь CodeSandBox

Answer 2

Большое спасибо Ferin и iamhuynq за помощь в этом.

Для тех, кто сталкивается с этим вопросом в будущем, вот рабочий код, включающий строгое равенство.

Демо: https://codesandbox.io/s/guess-the-number-game-82z1n

код

import React, { useState } from "react";

// generate random number
let randomNumber = Math.round(Math.random() * 10);

const GuessTheNumber = () => {
  const [value, setValue] = useState("");
  const [results, setResults] = useState("");

  const onClick = () => {
    const userGuess = parseInt(value, setValue); // convert string to integer

    // If the user clicks 'Guess' without entering a number, ask them to pick a number
    setResults(<p className="alert alert-danger">Pick a number</p>);

    // If user input matches randomNumber, user guess is Correct!
    if (userGuess === randomNumber)
    setResults(<p className="alert alert-success">Correct!</p>);

    // If user input is higher than randomNumber, user guess is 'Too high'
    if (userGuess > randomNumber)
      setResults(<p className="alert alert-warning">Too high, guess again</p>);

    // If user input is lower than randomNumber, user guess is 'Too low'
    if (userGuess < randomNumber)
      setResults(<p className="alert alert-warning">Too low, guess again</p>);
  };

  return (
    <>
      <h2>Guess The Number game</h2>
      <p className="lead">Guess a number between 1 and 10.</p>
      <input
        value={value}
        type="number"
        onChange={e => setValue(e.target.value)}
      />
      <button type="submit" onClick={onClick}>
        GUESS
      </button>
      <br />
      <br />
      {results}
    </>
  );
};

export default GuessTheNumber;

Answer 3

Ваши результаты всегда обновляются, потому что вы обновляете свое состояние, как только изменяется ваш ввод. Это все еще хорошо (насколько я знаю), но каждый раз, когда вы обновляете состояние, весь ваш компонент перерисовывается, также объект results перерисовывается и пересчитывается из-за этой строки:

results = onClick(value);

Поэтому я бы посоветовал также сохранить результат в вашем состоянии и рассчитывать его только тогда, когда пользователь нажимает «GUESS».

ПРИМЕЧАНИЕ. Пожалуйста, избегайте сравнений с == в Javascript и всегда предпочитают ===, потому что он также проверяет тип. Теперь это не удается, потому что вы сравниваете число со строкой -> проверьте свои типы данных и попытаетесь изменить его на ===

ПРИМЕЧАНИЕ 2. Я тоже еще новичок в React, поэтому извините, если Я не использовал хорошую формулировку et c - спасибо;)

Answer 4

results = onClick (value) - этот оператор класса выполняет функцию onClick каждый раз, когда вы меняете значение ввода. поэтому я обновил код.

import React, { useState } from "react";

let randomNumber = Math.round(Math.random() * 10);

const GuessTheNumber = () => {
  const [value, setValue] = useState("");
  const [statement, setStatement] = useState("");

  const onClickHandler = () => {
    // check users guess against randonNumber
    const userGuess = value;
    if (userGuess === "") return null;
    if (userGuess === randomNumber) setStatement("<p className="alert alert-success">Correct!</p>");
    if (userGuess > randomNumber) setStatement("<p>Too high, guess again</p>");
    if (userGuess < randomNumber) setStatement("<p>Too Low, guess again</p>");
  };

  return (
    <>
      <h2>Guess The Number game</h2>
      <p className="lead">Guess a number between 1 and 10.</p>
      <input
        value={value}
        type="number"
        onChange={e => setValue(e.target.value)}
      />
      <button type="submit" onClick={onClickHandler}>
        GUESS
      </button>
      <br />
      <br />
      {statement}
    </>
  );
};

export default GuessTheNumber;