如何增加/减少点击 Js/ReactJs 中相同按钮的计数

Posted 2023-02-23

【中文标题】如何增加/减少点击 Js/ReactJs 中相同按钮的计数

【英文标题】：How to increase/decrease count on click of same button in Js/ReactJs

【发布时间】：2019-09-25 10:57:49

【问题描述】：

我想根据按钮点击来增加/减少计数器。 设想： 按钮上有一个初始值-比如说：5 当用户点击按钮时，它会增加到 +1 - o/p: 6 但是，当用户再次单击按钮时，它会再次减少到 5。 在这种情况下，我没有 2 个按钮 - inc 和 dec 来增加/减少计数。

代码：

class Hello extends React.Component 
constructor() 
   super()
   this.state = 
     count: 10,

   
 
 getCount( c ) 

    const clicked = this.state.clicked
if(c == 1)
  this.setState(count: this.state.count +1, clicked: true);
 else 
  this.setState(count: this.state.count -1)


  
  render() 
    return  <div>
                    <button onClick=this.getCount.bind(this, 1)> click me for increase </button>
                    <button onClick=this.getCount.bind(this, 0)> click me for decrease </button>
                    <div><h1>this.state.count</h1></div>

                     </div>;
  


ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('root')
);

【问题讨论】：

这似乎是一个奇怪的要求：按钮总是 5 或 6，不是吗？

是的，这很奇怪，但我相信这是演示按钮点击的简单递增递减

@user1234 对我的回答有什么想法吗？我想想办法改进它。

@ChristopherNgo，这对我来说是应该的工作方式..

甜蜜！如果您有任何问题，请告诉我。 :)

【参考方案1】：

您需要一个额外的状态值来跟踪按钮的状态。

class Hello extends React.Component 
   constructor() 
      super()
      this.state = 
        count: 100,
        clicked: false
      
    
  getCount() 
    const clicked = this.state.clicked
    if(clicked)
      this.setState(count: this.state.count - 1, clicked: false);
     else 
      this.setState(count: this.state.count + 1, clicked: true)
    

  
  render() 
    return  <div>
                    <button onClick=this.getCount.bind(this)>Like | this.state.count</button>
                </div>;
  


ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

【参考方案2】：

我已经尝试了以下解决方案。

class App extends Component
 constructor()
   super()
   this.state=
     count:0,
   
 

 increment()
   this.setState(
     
       count:this.state.count+1
     
   );
 ;

 decrement()
   this.setState(
     
    count:this.state.count-1
     
   );
 ;

 reset()
   this.setState(
     
       count:0
     
   )
 

 render()
    return(
        <div style=
          position: 'absolute', left: '50%', top: '50%',
          transform: 'translate(-50%, -50%)'
      >
            <h1>Current Count :this.state.count</h1>
            <button className="inc"  onClick=(e)=>this.increment(e)>Increment!</button>
            <button  className="dec" onClick=(e)=>this.decrement(e)>Decrement!</button>
            <button className="reset" onClick=(e)=>this.reset(e)>Reset!</button>

        </div>

    );
 






export default App;

除了递增和递减之外，上面的代码还有一个重置按钮，可以将计数重置为 0。