Блог

Я записал код ниже.

Мой результат должен состоять из 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;
                                    
 

Итак, почему все кнопки меняются одновременно? Что я делаю не так?

вы используете только одну переменную cnt для отслеживания количества. Если вы хотите, чтобы они обновлялись отдельно, каждая кнопка должна увеличивать или уменьшать другую переменную состояния.

Например , вы могли бы использовать pulpFictionCnt и т. tarantinoCnt Д. Для отслеживания различных показателей.

Сохраните отдельный компонент для себя 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