如何在 React 中的 onclick 事件中传递参数（无法获取值）

Question

我无法获得预期值，所以请大家帮帮我代码应该运行，每次单击按钮时，它应该增加一次并有一个 id，但它告诉我在渲染方法中未定义产品

import React, { Component } from 'react';

class Counter extends Component {
    state = {
        count: 0
     
    }

    //constructor() {
    //    super();
    //    this.handleIncreement = this.handleIncreement.bind(this);
    //}

    handleIncreement = product => {
        console.log(product);
        this.setState({ count: this.state.count + 1});
    }

    render() { 
        return (
            <div>
            
            <span className={this.handlebadgeClasses()}>{this.handleCounter()}</span>
            <button onClick={ () =>this.handleIncreement(product) } className="btn btn-secondary btn-sm">Increement</button>
            
            </div> 
          );
    }

    handlebadgeClasses() {
        let classes = "badge m-2  badge-";
        classes += this.state.count === 0 ? "warning" : "primary";
        return classes;
    }

    handleCounter(){
        const {count} = this.state;
        return count === 0 ? 'Zero' : count;
    }
}
 
export default Counter;

Answer 1

我不认为我理解你想要达到的目标，但如果在这一行

<button onClick={ () =>this.handleIncreement(product) } className="btn btn-secondary btn-sm">Increement</button>

您只想增加计数，只需执行以下操作：

<button 
  onClick={ () =>{
    this.setState(prev=>({count: prev.count +1}))
  } } 
  className="btn btn-secondary btn-sm">Increement</button>