JavaScript-React中的随机数生成器-堆栈溢出

顺晟科技

2022-10-19 12:37:26

我试图用React（我是新手）做一个随机数生成器，它有一个min和max输入，但它不能很好地工作，它生成随机数，但不是max和min之间的随机数

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>
  );
}

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

顺晟科技：

react中的命名函数不是反应式的，也就是说，它们只计算一次，如果该函数引用了函数范围之外的值，则只使用该变量的初始值，如果该变量被更新，则该函数不会被重新初始化

所以genrarNmero函数

必须且必须为100和0

您可以通过传入函数并将其作为参数来解决此问题

或者您可以使用usecallbackreact钩子，如果依赖关系发生变化，该钩子将重新初始化函数

应该在gerarNumero（）函数中添加Math.flow（）函数。

const newNumber=parseInt(math.flow(math.random()*(Valormax-Valormin)+ValorMin))；

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

codesandbox

需要将字符串转换为数字。

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>
  );
}

应转换为number，因为在JS中1+'1'='11'。

试试这个

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>
  );
}

上一篇：html-og：映像不适用于Reac 下一篇：没有JavaScript-Stack

网站建设

Html

JavaScript-React中的随机数生成器-堆栈溢出