Reactjs：按下按钮随机化一个数组答案

【问题标题】：Reactjs: Pressing button to randomize an arrayReactjs：按下按钮随机化一个数组
【发布时间】：2019-05-15 06:31:32
【问题描述】：

基本上，我正在尝试制作一个卡片程序，可以从 52 张卡片中随机挑选 5 张卡片。这些牌不能重复。我已经通过传统的 javascript 弄清楚了随机化器。但是，我正在使用 ReactJs 制作一个按钮，如果按下该按钮，将创建一组新的五张卡片。

class Reset extends React.Component {
  constructor(props) {
    super(props);
    this.state = {...};
  }

  handleClick() {...}

  render() {
    return <button onClick={this.handleClick}>{...}</button>;
  }
}

const cards = [
  "A♥",
  "A♠",
  "A♦",
  "A♣",
  "2♣",
  "3♣",
  "4♣",
  "5♣",
  "6♣",
  "7♣",
  "8♣",
  "9♣",
  "10♣",
  "K♣",
  "Q♣",
  "J♣",
  "2♦",
  "3♦",
  "4♦",
  "5♦",
  "6♦",
  "7♦",
  "8♦",
  "9♦",
  "10♦",
  "K♦",
  "Q♦",
  "J♦",
  "2♥",
  "3♥",
  "4♥",
  "5♥",
  "6♥",
  "7♥",
  "8♥",
  "9♥",
  "10♥",
  "K♥",
  "Q♥",
  "J♥",
  "2♠",
  "3♠",
  "4♠",
  "5♠",
  "6♠",
  "7♠",
  "8♠",
  "9♠",
  "10♠",
  "K♠",
  "Q♠",
  "J♠"
];
var hand = [];

function in_array(array, el) {
  for (var i = 0; i < array.length; i++) if (array[i] == el) return true;
  return false;
}

function get_rand(array) {
  var rand = array[Math.floor(Math.random() * array.length)];
  if (!in_array(hand, rand)) {
    hand.push(rand);
    return rand;
  }
  return get_rand(array);
}

for (var i = 0; i < 5; i++) {
  document.write(get_rand(cards));
}

ReactDOM.render(<Reset />, document.getElementById("root"));

基本上，我必须用“...”填写哪些部分才能让代码重新随机化包。

【问题讨论】：

嗨 bigboyopiro，刚刚给您写了一个答案，如果您有任何问题，请告诉我。

标签： javascript reactjs button random

【解决方案1】：

试试这样，我保留了很多你已经写的代码。你真的只需要将该逻辑移动到处理程序中。

这里也是沙盒：https://codesandbox.io/s/yv93w19pkz

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  constructor(props) {
      super(props);
      this.state = { 
        cards: ["A♥", "A♠", "A♦", "A♣", "2♣", "3♣", "4♣", "5♣", "6♣", "7♣", "8♣", "9♣", "10♣", "K♣", "Q♣", "J♣", "2♦", "3♦", "4♦", "5♦", "6♦", "7♦", "8♦", "9♦", "10♦", "K♦", "Q♦", "J♦", "2♥", "3♥", "4♥", "5♥", "6♥", "7♥", "8♥", "9♥", "10♥", "K♥", "Q♥", "J♥", "2♠", "3♠", "4♠", "5♠", "6♠", "7♠", "8♠", "9♠", "10♠", "K♠", "Q♠", "J♠"],
        hand: [] 
      }

       this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    const cards = this.state.cards

    const newHand = []

    function get_rand(array) {
       var rand = array[Math.floor(Math.random() * array.length)];
       if (!newHand.includes(rand)) {
          newHand.push(rand);
       } else {
         get_rand(cards);
       }
     }

    for (var i = 0; i < 5; i++) {
       get_rand(cards);
    }

    this.setState({
      hand: newHand
    })

  }

  render() {
    const { hand } = this.state
      return (
        <div>
          { hand ? (hand.map((card) => {
            return <p>{card}</p>
           })) : (
            null
          )}
          <button onClick={this.handleClick}>Randomize
          </button>
        </div>
      );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

【讨论】：

我同意这种方法，但您的沙箱包含他的旧代码。这是故意的吗？
@JkAlombro。你是说我的旧文件哈哈。稍后我会删除它，只是以我的旧沙箱为例
@bigboyopiro，刚刚意识到我忘了输入一小段逻辑，因为你可能会得到重复的卡片。检查沙箱以确保，或者您也可以添加原始 in_array 方法:)

【解决方案2】：

尝试声明卡片的状态，点击时更新

【讨论】：