随机数生成器在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中命名的函数不是响应式的，也就是说它们只计算一次，如果该函数引用了函数作用域之外的值，它将只使用该变量的初始值，如果变量更新了，函数将不会被重新初始化

so genrarNmero function

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

或者你可以使用react的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]);