如何在react中使用click事件创建随机数

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钩子useState，这样当你生成一个新的随机数时，你的组件会被重新渲染，像这样:

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