如何在React.js中生成随机数

在本文中，我们将看到如何使用React.js生成随机数。为了生成随机数，我们将使用 Math.random() 方法。

Math.random() 方法在JavaScript中返回一个介于0（包括）和1（不包括）之间的随机数。
Math.floor() 函数在JavaScript中被用于将给定的输入数值向下舍入为最近的较小整数。换句话说，它截断了数值的小数部分。

先决条件：

React入门
React状态
React事件
JSX语法

语法：

Math.random();

创建React应用的步骤：

步骤1： 通过使用此命令创建一个React应用

npx create-react-app react-project

步骤2： 在创建项目文件夹后，即react-project，使用以下命令导航到该文件夹：

cd react-project

项目结构： 它将如下所示：

如何在React.js中生成随机数

示例： 在这个示例中，“App”函数使用useState hook创建了一个名为“num”的状态变量和其更新函数“setNum”，初始值为0。App函数还有一个名为“randomNumberInRange”的辅助函数，用于生成指定范围内的随机数。它接受最小值和最大值作为输入。一个组件显示一个带有h2元素的“wrapper” div，显示当前的“num”状态值。点击wrapper内的按钮会触发handleClick函数，用一个1到20之间的随机数更新“num”。

在CSS代码中，用padding和text-align对“.wrapper”类进行样式设置。它还为“h2”和“button”元素设置了各种属性，包括悬停效果。

步骤3： 打开App.js文件，将源代码简单粘贴到App.js文件中。

import React, { useState } from "react"; 
import "./App.css"; 
const App = () => { 
    const [num, setNum] = useState(0); 
  
    const randomNumberInRange = (min, max) => { 
        return Math.floor(Math.random()  
                * (max - min + 1)) + min; 
    }; 
  
    const handleClick = () => { 
        setNum(randomNumberInRange(1, 20)); 
    }; 
  
    return ( 
        <div className="wrapper"> 
            <h2>Number is: {num}</h2> 
            <button onClick={handleClick}> 
                Click Me Generate 
            </button> 
        </div> 
    ); 
}; 
  
export default App;

CSS

.wrapper { 
    padding: 20px; 
    text-align: center; 
} 
  
h2 { 
    font-size: 24px; 
    margin-bottom: 10px; 
} 
  
button { 
    background-color: green; 
    color: white; 
    padding: 10px 20px; 
    border-radius: 5px; 
    border: none; 
    font-size: 16px; 
    cursor: pointer; 
} 
  
button:hover { 
    background-color: #3e8e41; 
    box-shadow: 1px 1px 10px 1px rgb(185, 185, 185); 
    transform: translate(0px, -2px); 
}

步骤4: 要运行该应用程序，请打开终端并输入以下命令。