React带区间输入的随机数生成器结果不在指定范围问题

• 输入值类型错误：你从input中取到的value是字符串格式，直接参与数值计算时，+运算会变成字符串拼接，而非数值加法，导致生成的结果完全不符合区间要求。
• 执行顺序错误：你先执行了随机数生成逻辑，再判断最大值是否小于最小值，就算输入不合法也会先生成错误结果，再覆盖成Error，逻辑顺序完全颠倒。
• 取值方式不符合React规范：React中不推荐使用document.getElementById获取表单值，通过事件对象直接取值更简洁，也能避免DOM查询的额外开销。

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(e) {
    // 直接转成数值存储
    setValorMax(Number(e.target.value));
  };
  function BotaoMin(e) {
    // 直接转成数值存储
    setValorMin(Number(e.target.value));
  };
  function gerarNumero() {
    // 先做合法性校验
    if (ValorMax < ValorMin) {
      alert('Max value should be higher than Min value')
      setNumeroAleatorio('Error')
      return
    };
    // 校验通过后再生成随机数，+1实现闭区间包含最大值
    const newNumber = parseInt(Math.random() * (ValorMax - ValorMin + 1)) + ValorMin;
    setNumeroAleatorio(newNumber);
  };

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

原来的随机数生成逻辑生成的是[最小值, 最大值)的左闭右开区间，不会取到你设置的最大值，修复代码里加了+1后就可以生成包含最大值在内的[最小值, 最大值]全闭区间结果，符合常规随机数生成器的使用习惯。

内容的提问来源于stack exchange，提问作者Saudo Unix