React Sell all button currency

Как я могу сделать кнопку, которая продает все мои вещи, как здесь "cvrcek". Я хочу продать все "cvrcek", когда я нажимаю кнопку "Prodat cvrcky" и добавляю валюту (* 10 для каждого).

import React, { Component } from 'react';
import logo from './img/brouk.png';
import './App.css';
import $ from 'jquery';
import ReactDOM from 'react-dom';
import { Line, Circle } from 'rc-progress';
import { get } from 'https';

class App extends Component {
  render() {
    return (
      <div className = "App">
        <header className = "App-header">
        <img src = {logo} className = "App-logo" alt = "logo" />
          <p>
            BROUK
          </p>
        </header>
        <section id = "sekce">
          <div class = "container">
            {/*<div class = "row">
              <div class = "col-sm-2">
                <Counter />
              </div>
              <div class = "col-sm-2">
                <Counter />
              </div>
              <div class = "col-sm-8">
                <Counter />
              </div>
            </div>*/}
            <Mujprogres />
          </div>
        </section>
      </div>
    );
  }
}

class Counter extends Component {
  state = {
    count: 0
  };
  handleClick = () => {
    this.setState((prevState, { count }) => ({
      count: prevState.count + 1
    }));
  };
  render() {
    return <button class = "btn btn-primary" onClick = {this.handleClick}>Hledat {this.state.count}</button>;
  }
}

/* PROGRESS BAR */
class Mujprogres extends Component {
  constructor() {
    super();
    this.state = {
      penize: 0,
      cvrcek: 0,
      broukPotemnik: 0,
      sarance: 0,
      percent: 0,
      color: '#3FC7FA',
    };
    this.changeState = this.changeState.bind(this);
    this.prodatCvrcka = this.prodatCvrcka.bind(this);
  }

  changeState() {
    function getRandomInt(max) {
      return Math.floor(Math.random() * Math.floor(max));
    }
    const colorMap = ['#3FC7FA', '#85D262', '#FE8C6A'];
    const value = parseInt(this.state.percent + 20);
    if (this.state.percent >= 100){
      {/*this.state.score += getRandomInt(50);*/}
      var generateNumber = getRandomInt(100);
      console.info(generateNumber);
        if (generateNumber < 50) {
          this.state.cvrcek += 1;
        } else if (generateNumber < 75) {
          this.state.broukPotemnik += 1;
        } else {
          this.state.sarance += 1;
        }
      return (this.state.percent = 0);
      return this.state.cvrcek;
    }
    this.setState({
      percent: value,
      color: colorMap[parseInt(Math.random() * 3, 10)],
    });
  }

  prodatCvrcka() {
    if (this.state.cvrcek > 0) {
      console.info ("máš");
      this.state.penize = this.state.cvcek * 10;
      return (this.state.cvrcek = 0);
    } else {
      console.info ("nemáš");
    }
  }

  render() {
    const containerStyle = {
      padding: '10px',
    };
    return (
      <div className = "progressBar">
        <h3>Progress Hledání {this.state.percent}%</h3><h3>Peníze: {this.state.penize}Kč</h3>
        <div style = {containerStyle}>
          <a>Cvrček: {this.state.cvrcek}</a><a>Brouk Potemník: {this.state.broukPotemnik}</a><a>Saranče: {this.state.sarance}</a>
          <Line percent = {this.state.percent} strokeWidth = "1" className = "lookForBug" strokeColor = {this.state.color} />
        </div>
        <p>
          <button class = "btn btn-primary" onClick = {this.changeState}>Hledat Brouky</button>
          <button class = "btn btn-primary" onClick = {this.prodatCvrcka}>Prodat cvrčky</button>
        </p>
      </div>
    );
  }
}

Я могу перевести, если хотите, ребята, весь код внутри "MujProgress" и функция prodatCvrcka, это весь мой код, который я делаю прямо сейчас. НО я действительно начинаю с javascript / react

Поведение ключевого слова "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
0
57
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

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

prodatCvrcka() {
    if (this.state.cvrcek > 0) {
      console.info ("máš");
      this.setState({
        penize: this.state.cvcek * 10,
        cvrcek: 0,
      });
    } else {
      console.info ("nemáš");
    }
  }

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