React 中的随机数生成器

Question

我正在尝试使用具有最小和最大输入的 React（我是新手）做一个随机数生成器，但它不能很好地工作，它正在生成随机数但不在最大和最小之间

import React, { useState } from 'react';
import './style.css';

export default function PaginaInicial() {
  const [numeroAleatorio, setNumeroAleatorio] = useState(0);
  const [ValorMax, setValorMax] = useState(100);
  const [ValorMin, setValorMin] = useState(0);

  function BotaoMax() {
    var ValorMaximo = document.getElementById('max').value
    setValorMax(ValorMaximo);

  };
  function BotaoMin() {
    var ValorMinimo = document.getElementById('min').value
    setValorMin(ValorMinimo);
  };
  function gerarNumero() {
    const newNumber = parseInt(Math.random() * (ValorMax - ValorMin)) + ValorMin;
    setNumeroAleatorio(newNumber);
    if (ValorMax < ValorMin) {
      alert('Max value should be higher than Min value')
      setNumeroAleatorio('Error')
    };
  };

  return (
    <div className="conteudo-centralizado">
      <h3>Random Number:</h3>
      <div className="divNum">
      </div>

      <div>
        <input type="number" id='min' min='1' max='9999' placeholder="Número Mínimo" onChange={BotaoMin} />
        <input type="number" id='max' min='1' max='9999' placeholder="Número Máximo" onChange={BotaoMax} />
      </div>
      <h1>{numeroAleatorio}</h1>

      <div className='area-botao'>
        <label>
          Click on the following button to get a random number:
        </label>

        <button onClick={gerarNumero}>
          Generate Number
        </button>
      </div>
    </div>
  );
}

另外我来自巴西，所以有些词是葡萄牙语，对不起

Answer 1

CodeSandbox

您需要将ValorMaximo 和ValorMinimo 从字符串转换为数字。

import React, { useState } from 'react';
import './style.css';

export default function PaginaInicial() {
  const [numeroAleatorio, setNumeroAleatorio] = useState(0);
  const [ValorMax, setValorMax] = useState(100);
  const [ValorMin, setValorMin] = useState(0);

  function BotaoMax() {
    var ValorMaximo = document.getElementById('max').value
    // Convert to number
    setValorMax(Number(ValorMaximo));

  };
  function BotaoMin() {
    var ValorMinimo = document.getElementById('min').value
    // Convert to number
    setValorMin(Number(ValorMinimo));
  };
  function gerarNumero() {
    const newNumber = parseInt(Math.random() * (ValorMax - ValorMin)) + ValorMin;
    setNumeroAleatorio(newNumber);
    if (ValorMax < ValorMin) {
      alert('Max value should be higher than Min value')
      setNumeroAleatorio('Error')
    };
  };

  return (
    <div className="conteudo-centralizado">
      <h3>Random Number:</h3>
      <div className="divNum">
      </div>

      <div>
        <input type="number" id='min' min='1' max='9999' placeholder="Número Mínimo" onChange={BotaoMin} />
        <input type="number" id='max' min='1' max='9999' placeholder="Número Máximo" onChange={BotaoMax} />
      </div>
      <h1>{numeroAleatorio}</h1>

      <div className='area-botao'>
        <label>
          Click on the following button to get a random number:
        </label>

        <button onClick={gerarNumero}>
          Generate Number
        </button>
      </div>
    </div>
  );
}

Answer 2

您应该在 gerarNumero() 函数中添加 Math.floor() 函数。

const newNumber = parseInt(Math.floor(Math.random() * (ValorMax - ValorMin) + ValorMin));

请查看以下链接 https://futurestud.io/tutorials/generate-a-random-number-in-range-with-javascript-node-js

Answer 3

您应该将ValorMin 转换为数字，因为 js 中的 1 + '1' = '11'。

试试这个

const newNumber = parseInt(Math.random() * (ValorMax - ValorMin)) + +ValorMin;

Answer 4

react 中的命名函数不是响应式的，即它们被评估一次，如果该函数引用函数范围之外的值，它只会使用该变量的初始值，如果变量被更新，则函数不会被重新-初始化

所以 genrarNmero 函数

function gerarNumero() {
  const newNumber = parseInt(Math.random() * (ValorMax - ValorMin)) + ValorMin;
  setNumeroAleatorio(newNumber);
  if (ValorMax < ValorMin) {
    alert('Max value should be higher than Min value');
    setNumeroAleatorio('Error');
  }
}

ValorMax 和 ValorMin 总是为 100 和 0

您可以通过将 ValorMax 和 ValorMin 作为参数传递给函数来解决此问题

function gerarNumero(ValorMax, ValorMin) {
  const newNumber = parseInt(Math.random() * (ValorMax - ValorMin)) + ValorMin;
  setNumeroAleatorio(newNumber);
  if (ValorMax < ValorMin) {
    alert('Max value should be higher than Min value');
    setNumeroAleatorio('Error');
  }
}

或者您可以使用 useCallback 钩子进行反应，如果依赖关系发生变化，它将重新初始化函数

const gerarNumero = useCallback(() => {
  const newNumber = parseInt(Math.random() * (ValorMax - ValorMin)) + ValorMin;
  setNumeroAleatorio(newNumber);
  if (ValorMax < ValorMin) {
    alert('Max value should be higher than Min value');
    setNumeroAleatorio('Error');
  }
}, [ValorMax, ValorMin]);