Функция увеличения / уменьшения в ReactJS - PullRequest
Новая
       17

Функция увеличения / уменьшения в ReactJS

0 голосов
/ 03 мая 2020

Я создал функцию увеличения / уменьшения, но у меня есть сомнения.

Могу ли я уменьшить счет, нажав на ту же кнопку, которая включает счетчик приращений? Как создать эту функцию?

Код: 

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      clicks: 0,
      show: true
    };
  }

  IncrementItem = () => {
    this.setState({ clicks: this.state.clicks + 1 });
  }
  DecreaseItem = () => {
    this.setState({ clicks: this.state.clicks - 1 });
  }
  ToggleClick = () => {
    this.setState({ show: !this.state.show });
  }

  render() {
    return (
      <div>
        <button onClick={this.IncrementItem}>Click to increment by 1</button>
        <button onClick={this.DecreaseItem}>Click to decrease by 1</button>
        <button onClick={this.ToggleClick}>
          { this.state.show ? 'Hide number' : 'Show number' }
        </button>
        { this.state.show ? <h2>{ this.state.clicks }</h2> : '' }
      </div>
    );
  }
}

export default App;

1 Ответ

0 голосов
/ 04 мая 2020

Вы можете установить условие в функции, которую вы запускаете при нажатии на кнопку. Может быть что-то вроде этого:

import React, {Component} из 'Reaction'; 

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
      clicked: false,
    };
  }

  toggleClicked = () => {
      const counter = this.state.clicked ? counter +1 : counter - 1;
      const clicked = !this.state.clicked;

      this.setState({ counter, clicked })
  }

  render() {
    return (
      <div>
        <button onClick={this.toggleClicked}>Click</button>

        { this.state.counter ? <h2>{ this.state.counter }</h2> : '' }
      </div>
    );
  }
}

export default App;

Таким образом, если вы уже нажали, счетчик уменьшится на 1 и наоборот.

...