如何使用这个类添加不同的事件 |REACT JS|答案

【问题标题】：How to add different events with this Class |REACT JS|如何使用这个类添加不同的事件 |REACT JS|
【发布时间】：2021-11-17 00:54:23
【问题描述】：

我写下了下面的代码。

我的结果应该是增加和减少一个值的 4 个按钮。

正在工作，但所有按钮同时更改！

我想按一个按钮而不是同时获得结果。

我已经尝试过使用数组，但似乎我的方法不对！


import React from 'react';

class Counter extends React.Component {
    constructor() {
        super();

        this.state = {
            cnt: 0

        };
    }


    handleDecrement = () => {
        this.setState({
            cnt: this.state.cnt + 1
        });
    }

    handleIncrement = () => {
        this.setState({
            cnt: this.state.cnt - 1
        });
    }




    
    render() {

        

        return (

            
                
            <><div className = "btn"></div>
                <header>
                        <h1>Tarantino Shop</h1>
                </header>
                    <div>
                    <img src= "images/walltara.png" alt="cart" width = "80%"/>
                    </div>
                    
                    <div className="divprimario">

                    <div className="items">
                        <img src= "images/tara1.jpg" alt="cart" />  
                        <div className = "titles"> T-Shirt Pulp Fiction</div>
                        
                        <div>
                            <button onClick={this.handleDecrement}>+</button>
                            <p>{this.state.cnt} </p>
                            <button onClick={this.handleIncrement}>-</button>
                        </div>  
                    </div> 
                    

                    <div className="items">
                        <img src= "images/tara2.jpg" alt="cart" />
                        <div className = "titles">T-Shirt Tarantino </div> 
                        <div>
                            <button onClick={this.handleDecrement}>+</button>
                            <p>{this.state.cnt} </p>
                            <button onClick={this.handleIncrement}>-</button>
                        </div>
                    </div>


                    <div className="items">
                        <img src= "images/tara3.jpg" alt="cart" />
                        <div className = "titles">T-Shirt Le Iene</div> 
                        <div>
                            <button onClick={this.handleDecrement}>+</button>
                            <p>{this.state.cnt} </p>
                            <button onClick={this.handleIncrement}>-</button>
                        </div>
                    </div>


                    <div className="items">
                        <img src= "images/tara4.jpg" alt="cart" />
                        <div className = "titles">T-Shirt Random</div> 
                        <div>
                            <button onClick={this.handleDecrement}>+</button>
                            <p>{this.state.cnt} </p>
                            <button onClick={this.handleIncrement}>-</button>
                        </div>
                    </div>   


                    </div>

                    </>



                    );
            }
        }


export default Counter;

那么，为什么所有的按钮会同时改变呢？我做错了什么？

【问题讨论】：

标签： reactjs button exchange-server

【解决方案1】：

您只使用一个变量cnt 来跟踪计数。如果您希望它们分别更新，则每个按钮必须递增或递减不同的状态变量。

例如，您可以使用pulpFictionCnt、tarantinoCnt 等来跟踪不同的计数。

【讨论】：

我试过了，但似乎每个按钮都需要一个类构造函数:(
感谢您的回复，但我该怎么做呢？

【解决方案2】：

为您的Counter 保留一个单独的组件，并提供其他数据作为道具。

import React from "react";

class Counter extends React.Component {
  constructor() {
    super();

    this.state = {
      cnt: 0
    };
  }

  handleDecrement = () => {
    this.setState({
      cnt: this.state.cnt + 1
    });
  };

  handleIncrement = () => {
    this.setState({
      cnt: this.state.cnt - 1
    });
  };

  render() {
    return (
      <>
        <div className="divprimario">
          <div className="items">
            <img src="images/tara1.jpg" alt="cart" />
            <div className="titles">{this.props.title}</div>

            <div>
              <button onClick={this.handleDecrement}>+</button>
              <p>{this.state.cnt} </p>
              <button onClick={this.handleIncrement}>-</button>
            </div>
          </div>
        </div>
      </>
    );
  }
}

export default Counter;

以下可能是其他一些组件，

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import Counter from "./Counter";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <div>
      <div className="btn"></div>
      <header>
        <h1>Tarantino Shop</h1>
      </header>
      <div>
        <img src="images/walltara.png" alt="cart" width="80%" />
      </div>
      <Counter title={"T-Shirt Pulp Fiction"} />
      <Counter title={"T-Shirt Tarantino"} />
      <Counter title={"T-Shirt Le Iene"} />
      <Counter title={"T-Shirt Random"} />
    </div>
  </StrictMode>,
  rootElement
);

这里的沙箱代码 => https://codesandbox.io/s/laughing-bhabha-zsyvw?file=/src/Counter.js

【讨论】：

@SF，看看这个！！