Блог

В настоящее время я работаю над кнопками счетчика, но каждый раз, когда я нажимаю на одну из кнопок, значения всех кнопок автоматически меняются. Я новичок в reactjs, поэтому было бы здорово, если бы кто-нибудь мог указать мне правильное направление. Спасибо!

Вот как выглядит мой код:

 mport React from "react";
import {Card} from 'react-bootstrap';
import Button from '@material-ui/core/Button';
import "./Box.css"
//const soup = require("./soup.jpeg");
import AppBar from '@material-ui/core/AppBar';
import Typography from '@material-ui/core/Typography';
import { Link } from "react-router-dom";


class MenuPage extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            foodName : '',
            price : 0,
            amount : 0,
            counter: 0

        }
    }

    increment(){
        this.setState({
            counter: this.state.counter   1
        });
    }

    decrement(){
        if(this.state.counter <= 0){
            this.setState({
                counter:0
            });
        }else {
            this.setState({
                counter: this.state.counter - 1
            });
        }
    }

    render() {
        const cardInfo = [
            {image : "" , title: "Soup", price: "$6.0"},
            {image : "", title: "Pancakes", price:"$7.4"},
        ];
        const renderCard = (card,index) => {
            return(
                <Card style={{ width: '18rem' }} key = {index} className="box">
                    <Card.Img variant="top" src = {card.image} />
                    <Card.Body>
                        <Card.Title>{card.title}</Card.Title>
                        <Card.Text>
                            {card.price}
                        </Card.Text>
                        <button type="button" className="btn btn-danger" id="minus" onClick={this.decrement.bind(this)}>-</button>
                        <input type="text" id="index" value={this.state.counter}/>
                        <button type="button" className="btn btn-success" id="plus" onClick={this.increment.bind(this)}> </button>
                    </Card.Body>
                </Card>
            )
        }
        return <div className= "grid">{cardInfo.map(renderCard)}</div>;

    }
}
export default MenuPage;

 

Вот как выглядит мой пользовательский интерфейс в настоящее время:

Меню сохраняет counter состояние, и каждая отдельная карточка просто показывает состояние меню.

Если вы хотите, чтобы каждая карта имела свое собственное состояние, вы должны сделать карту компонентом. Затем вы присваиваете компоненту Card состояние со счетчиком.

Затем в меню может отображаться множество компонентов карты. Тогда у каждого из них будет свое собственное состояние.

Пример компонента карты с состоянием счетчика

 class Card extends React.Component {
  constructor(props) {
    super(props);
    this.state = { clicks: 0 };
  }

  buttonClicked() {
    this.setState({clicks: this.state.clicks 1});
  }

  render() {
    return (
      <div>
        <h4>{this.props.name}</h4>
        <div>Clicks: {this.state.clicks}</div>
        <button onClick={()=>this.buttonClicked()}>Add one</button>
      </div>
    );
  }
}
 

Рендеринг нескольких карт, каждая со своим собственным состоянием счетчика

 class MenuPage extends React.Component {
  constructor() {
    super();
  }
  render() {
    return (
      <div>
        <Card name="Noodles"/>
        <Card name="Pancakes"/>
        <Card name="Soup"/>
      </div>
      );
  }
}