ReactJS 中的递增/递减函数

Question

我创建了一个increment/decrement函数，但我有疑问。

我可以减少单击包含增量计数的同一按钮的计数吗？如何创建该功能？

代码：

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;

Answer 1

您可以在单击按钮时触发的函数中设置条件。也许是这样的：

从 'react' 导入 React，{ 组件}；

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，反之亦然。

ReactJS 中的递增/递减函数

Increment / Decrement function in ReactJS

increment

reactjs