如何在反应中使用点击事件创建随机数

Question

我想在单击按钮时创建 1 到 50 之间的随机数。所以这是我的组件：

import React from 'react'
import './Board.css';

const Board = () => {
    let rand;
    function createNumber() {
        rand = Math.floor(Math.random() * 50) + 1;
    }
    return (
        <div className="game-board">
            <div id="selected-number">
                <h1 className="bingo-ball__text">{rand}</h1>
                <button className="button button3" onClick={createNumber}>Select Number</button>
            </div>
        </div>
    )
}

export default Board

但是当我点击时，我无法得到任何响应（所以我在这个 {rand} 中看不到任何东西）或错误。

Answer 1

你应该使用 react hook useState 这样当你像这样生成一个新的随机数时你的组件会得到 re-rendered:

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [rnd, setRnd] = useState(0);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button onClick={() => setRnd(Math.floor(Math.random() * 50))}>
        gen randomn num
      </button>
      <div>{rnd}</div>
    </div>
  );
}

示例：https://codesandbox.io/s/black-pine-5sgxxw?file=/src/App.js:0-349

如何在反应中使用点击事件创建随机数

how to create random number with click event in react

reactjs

react-component