React数字猜谜功能点击无响应问题排查求助

修复后的完整代码 #

import { useState } from 'react';

export function Main() {
  // 用useState管理用户输入的数字
  const [userNumber, setUserNumber] = useState('');

  function Aleatorio() {
    // 将输入值转为数字
    const num = Number(userNumber);
    // 生成0到10的随机整数
    const random = Math.floor(Math.random() * 11);
    
    // 正确的条件判断逻辑
    if (num === random) {
      window.alert('Parabéns, acertaste!');
    } else if (num < random) {
      window.alert('Tás quase, tente um número maior');
    } else if (num > random) {
      window.alert('Tás quase, tente um número menor');
    }
  }

  return (
    <>
      <h1>Seja bem vindo a loteria, carregue <a>aqui</a> para conhecer as regras</h1>
      <h2>Introduza um número de 0 a 10 na caixa abaixo</h2>
      <input 
        type="number" 
        placeholder="Número" 
        value={userNumber}
        onChange={(e) => setUserNumber(e.target.value)}
        min="0"
        max="10"
      />
      <input type="button" value="Validar" onClick={Aleatorio} />
      <p id="res">yooo</p>
    </>
  )
}

原代码的核心问题 #

• 输入值获取方式错误：原代码试图用document.getElementById('nmb-num')获取输入框，但输入框根本没加id="nmb-num"属性；而且React中不推荐直接操作DOM，用useState绑定输入值才是正确做法。
• 函数参数逻辑错误：点击按钮时，onClick会自动传递事件对象给Aleatorio，而非你预期的数字。原函数的默认参数写法完全无法拿到用户输入。
• 条件判断对象错误：原代码里用未处理的num（要么是DOM元素，要么是事件对象）和随机数比较，而非转成数字后的数值，导致判断完全不生效。

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