React 卖出所有按钮货币

Question

我怎样才能制作一个像这里一样出售我所有东西的按钮 "cvrcek"。当我点击按钮 "Prodat cvrcky" 并添加货币（每个 *10）时，我想出售所有 "cvrcek"。

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.log(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.log ("máš");
      this.state.penize = this.state.cvcek * 10;
      return (this.state.cvrcek = 0);
    } else {
      console.log ("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

Answer 1

Ahoj，在 React 中你不应该直接改变状态，而是使用 setState。所以你需要像这样改变你的方法的逻辑：

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

React 卖出所有按钮货币

React Sell all button currency

javascript

reactjs