Shuffle Array 单击处理程序事件帮助 React

Question

所以我有下面的代码来打乱一个数组和return一对单词

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] )

我想return每个词在它自己的按钮中，如下图所示：每次使用 onClick 选择按钮时，我希望页面重新呈现一组新问题。我如何在 React 中执行此操作？

Answer 1

应用程序的简单版本，没有 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

Answer 2

我会使用 useEffect 和 useState 挂钩来创建随机选择的单词数组。

例如，useState 挂钩的第一个参数是 randomWordPair，然后我将创建一个函数来使用类似以下内容呈现按钮：

const renderWordButtons = () => { 
  return randomWordPair.map((word) => {
      return (<button onClick={(e) => handleOnClick(word)}>{word}</button>)
    )
  })
}

然后您将在组件的 return 中调用该函数。

Shuffle Array 单击处理程序事件帮助 React

Shuffle Array click handler event help React

javascript

onclick

reactjs