React.js：按下按钮以随机化数组

Question

Basically, I am trying to make a card program that would pick five cards out of 52 in random. These cards must not repeat. I have already figured out the randomizer through traditional javascript. However, I am using ReactJs to make a button which if pressed, would create a new set of five cards.

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"));

Basically, what would I have to fill in the parts with "..." in order for the code to rerandomize the pack.

Answer 1

Try something like this, I'm preserving alot of the code you already wrote. You really just have to move that logic into the handler.

Here's the sandbox as well: 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')
);

Answer 2

Try to declare the cards in the state and update when you click on it