مدیریت State در کامپوننت‌های کلاسی ری‌اکت (React Class Components)

npx create-react-app state-class-tutorial
cd state-class-tutorial

npm config set registry https://npm.parmincloud.ir

npm start

import React from 'react';
import './App.css';

function App() {
  return <></>;
}

export default App;

rm src/logo.svg

mkdir -p src/components/App
mv src/App.* src/components/App/

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './components/App/App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

mkdir -p src/components/Product

import React, { Component } from 'react';
import './Product.css';

export default class Product extends Component {
  // تعریف State اولیه
  state = {
    cart: [],
    total: 0
  }

  currencyOptions = {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }

  // متدی برای فرمت‌دهی قیمت
  getTotal = () => {
    return this.state.total.toLocaleString(undefined, this.currencyOptions);
  }

  render() {
    return (
      <div className="wrapper">
        <div>
          سبد خرید: {this.state.cart.length} آیتم
        </div>
        <div>مجموع قیمت: {this.getTotal()} هزار تومان</div>

        <div className="product">
          <span role="img" aria-label="ice cream">🍦</span>
        </div>
        <button>افزودن</button>
        <button>حذف</button>
      </div>
    );
  }
}

.product span {
    font-size: 100px;
}

.wrapper {
    padding: 20px;
    font-size: 20px;
    direction: rtl;
    text-align: right;
}

.wrapper button {
    font-size: 18px;
    margin: 5px;
    padding: 5px 15px;
    background: none;
    border: 1px solid #ccc;
    cursor: pointer;
}

import React from 'react';
import Product from '../Product/Product';

function App() {
  return <Product />;
}

export default App;

import React, { Component } from 'react';
import './Product.css';

export default class Product extends Component {
  state = {
    cart: [],
    total: 0
  }

  // متد افزودن آیتم با مقدار ثابت
  add = () => {
    this.setState({
      cart: ['بستنی'],
      total: 50
    });
  }

  // متد خالی کردن سبد خرید
  remove = () => {
    this.setState({
      cart: []
    });
  }

  currencyOptions = {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }

  getTotal = () => {
    return this.state.total.toLocaleString(undefined, this.currencyOptions);
  }

  render() {
    return (
      <div className="wrapper">
        <div>
          سبد خرید: {this.state.cart.length} آیتم
        </div>
        <div>مجموع قیمت: {this.getTotal()} هزار تومان</div>

        <div className="product">
          <span role="img" aria-label="ice cream">🍦</span>
        </div>
        <button onClick={this.add}>افزودن</button>
        <button onClick={this.remove}>حذف</button>
      </div>
    );
  }
}

import React, { Component } from 'react';
import './Product.css';

const products = [
  { emoji: '🍦', name: 'بستنی', price: 50 },
  { emoji: '🍩', name: 'دونات', price: 25 },
  { emoji: '🍉', name: 'هندوانه', price: 40 }
];

export default class Product extends Component {
  state = {
    cart: [],
  }

  // افزودن محصول به سبد با حفظ محصولات قبلی
  add = (product) => {
    this.setState(prevState => ({
      cart: [...prevState.cart, product],
    }));
  }

  // حذف یک واحد از محصول انتخاب شده
  remove = (product) => {
    this.setState(prevState => {
      const cart = [...prevState.cart];
      const productIndex = cart.findIndex(p => p.name === product.name);
      
      if (productIndex < 0) {
        return; // اگر محصول در سبد نبود، رندر مجدد انجام نمی‌شود
      }
      
      cart.splice(productIndex, 1);
      return { cart };
    });
  }

  currencyOptions = {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }

  // محاسبه مجموع قیمت بر اساس محتویات سبد
  getTotal = () => {
    const total = this.state.cart.reduce((totalCost, item) => totalCost + item.price, 0);
    return total.toLocaleString(undefined, this.currencyOptions);
  }

  render() {
    return (
      <div className="wrapper">
        <div>
          سبد خرید: {this.state.cart.length} آیتم
        </div>
        <div>مجموع قیمت: {this.getTotal()} هزار تومان</div>

        <div>
          {products.map(product => (
            <div key={product.name}>
              <div className="product">
                <span role="img" aria-label={product.name}>{product.emoji}</span>
              </div>
              <button onClick={() => this.add(product)}>افزودن</button>
              <button onClick={() => this.remove(product)}>حذف</button>
            </div>
          ))}
        </div>
      </div>
    );
  }
}