Reactjs — изменение элемента в рандомизированном массиве с помощью кнопки

Это снова я с той же карточной игрой, что и мой последний вопрос. Я добился некоторого прогресса, но на этот раз я хочу исправить код, чтобы одна карта в рандомизированной «руке» переключалась на другую случайную карту, которая не должна быть уже использованной картой. Это делается нажатием второй кнопки под кнопкой рандомайзера. В коде, который я сделал, кнопка изменения делает то же самое, что и кнопка рандомизации, но я намерен изменить ее.

function replace() {
  var res = str.replace(this.state.cards, this.state.replacecards);
}
// what i intend to be the function that is used to replace the item

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 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(newHand, rand)) {
        newHand.push(rand);
        return rand;
      }
    }
    function sortcards(a, b) {
      return a > b ? 1 : b > a ? -1 : 0;
    }

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

    this.setState({
      hand: newHand
    });
    newHand.sort(sortcards);
  }

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

Я скоро вернусь с твоим ответом, друг. Если вы помните меня из вашего последнего вопроса :)

Chris Ngo 20.05.2019 09:16
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
58
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вот что вам нужно bigboyopiro. Вполне уместно, что я также могу ответить на ваш второй вопрос :).

Вот песочница для справки: https://codesandbox.io/s/yv93w19pkz

  swapOneCard = () => {
    const currentHand = this.state.hand
    //get random card to remove from current hand
    const cardToRemove = currentHand[Math.floor(Math.random() * currentHand.length)];
    //all cards
    const allCards = this.state.cards
    //unchoosen cards to choose from
    const unchoosenCards = allCards.filter((card) => {
      return !currentHand.includes(card)
    })
    //get random card from unchoosen cards
    var cardToAdd = unchoosenCards[Math.floor(Math.random() * unchoosenCards.length)];

    const newHand = currentHand.map((card) => {
      if (card == cardToRemove){
        return cardToAdd
      } else {
        return card
      }
    })

    this.setState({
      hand: newHand
    })
  }

Еще раз спасибо, хотя кажется, что это заменяет случайную карту, а не только первую карту. Я намерен сделать так, чтобы у каждой карты была кнопка, чтобы их можно было поменять местами.

bigboyopiro 20.05.2019 09:58

@bigboyopiro о да! Я оставил для вас маленькую заметку об этом в песочнице. Просто установите cardToRemove = currentHand[0], если вы просто хотите поменять местами первую карту :)

Chris Ngo 20.05.2019 10:05

Если я правильно понимаю ваш вопрос и ваш код, кнопка, которую вы собираетесь нажать, заменяет первую карту в вашей руке новой картой, которой еще нет в вашей руке. Если это так, вы можете использовать следующее для достижения этой цели:

getNewCard = () => {
  let { cards, hand } = this.state;
  let newCardIndex = Math.floor(Math.random()*cards.length);
  let newCard = cards[newCardIndex];
  while (hand.contains(newCard)) {
    cards.splice(newCardIndex, 1);
    newCardIndex = Math.floor(Math.random()*cards.length);
    newCard = cards[newCardIndex];
  }
  
  hand[0] = newCard;
  this.setState({ hand });
}

Важная часть — цикл while. Он будет продолжать получать новую случайную карту в массиве до тех пор, пока случайная карта, которую мы получаем, не окажется в нашей руке. Если случайная карта находится в нашей руке, мы удаляем ее из массива карт. Это делается для того, чтобы мы случайно не получили одну и ту же карту снова.

Другие вопросы по теме