所以我有下面的代碼來洗牌一個陣列并回傳一對單詞
const words =
[ 'monitor', 'program', 'application', 'keyboard'
, 'javascript', 'gaming', 'network'
]
for (let i = words.length; --i;) // shuffle Array
{
let j = Math.floor(Math.random() * (i 1));
[words[i], words[j]] = [words[j], words[i]]
}
// get 2 random words
console.log( words[0], words[1] )
我想在自己的按鈕中回傳每個單詞，如下圖所示： 每次使用 onClick 選擇一個按鈕時，我希望頁面重新呈現一組新問題。我怎樣才能在 React 中做到這一點？
uj5u.com熱心網友回復：
沒有 CSS 的簡單版本的應用程式看起來像：
import React, { useState } from 'react';
const defaultWords = [ 'monitor', 'program', 'application', 'keyboard', 'javascript', 'gaming', 'network']
const App = () => {
const [words, setWords] = useState(defaultWords);
const shuffleWords = () => {
for (let i = words.length; --i;) {
let j = Math.floor(Math.random() * (i 1));
[words[i], words[j]] = [words[j], words[i]]
}
setWords([...words]);
}
return (
<div>
<button onClick={shuffleWords}>{words[0]}</button>
<button onClick={shuffleWords}>{words[1]}</button>
</div>
);
}
export default App;
你可以在codesandbox上試試代碼：https ://codesandbox.io/embed/sparkling-sunset-bstk7 ? fontsize =14& hidenavigation =1& theme = dark
uj5u.com熱心網友回復：
我會使用 useEffect 和 useState 鉤子來創建一個隨機選擇的單詞陣列。
例如， useState 鉤子的第一個引數是randomWordPair，然后我將創建一個函式，該函式將使用以下內容呈現按鈕：
const renderWordButtons = () => {
return randomWordPair.map((word) => {
return (<button onClick={(e) => handleOnClick(word)}>{word}</button>)
)
})
}
然后您將在組件的回傳中呼叫該函式。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/350018.html
標籤：javascript 反应 点击