javascript - 如何在 React 中递增/递减单独的计数器？

Question

我为一个项目制作了一个票务订购系统，但是当我想增加其中一张票的数量时，两个柜台都会增加。我不确定为什么会发生这种情况，但我认为这是因为只有一个值存储在状态中。

export default function Ticket() {

    const [count, setState] = useState(0); // useState returns a pair. 'count' is the current state. 'setCount' is a function we can use to update the state.

    function increment(e) {
        //setCount(prevCount => prevCount+=1);
        setState(function (prevCount) {
            return (prevCount += 1);
        });
    }

    function decrement() {
        setState(function (prevCount) {
            if (prevCount > 0) {
                return (prevCount -= 1);
            } else {
                return (prevCount = 0);
            }
        });
    }


    return (
        <div>
            <section className="ticket-step">
                <h1>TICKETS</h1>
            </section>

            <div className="ticket-booking is-flexbox">

                <section className="ticket-content">

                    <ul className="tickets-tab is-flexbox">
                        <li>Tickets</li>
                        <li>Abbonementen</li>
                    </ul>


                    <div className="ticket-list-section">

                        <div className="ticket-list-details heading">
                            <div id="calender">
                                <h3>Datum : 30 - 10 - 2022</h3>
                            </div>

                            <div id="opening">
                                <h3>Openingstijden: 12:00 - 20:00 </h3>
                            </div>
                        </div>

                        <div className="ticket-list-details">

                            <div className="ticket-block">

                                <div className="ticket-title">
                                    <h3>Parkeer ticket</h3>
                                </div>
                                <div className="price">
                                    <h3>Prijs: $20</h3>
                                </div>
                                <div className="counter">
                                    <button className="increase-amount" onClick={increment}>+</button>
                                    <input type="text" className="amount" defaultValue="0" value={count}/>
                                    <button className="decrease-amount" onClick={decrement}>-</button>
                                </div>

                            </div>

                            <div className="ticket-block">

                                <div className="ticket-title">
                                    <h3>Early Horror-ticket</h3>
                                </div>
                                <div className="price">
                                    <h3>Prijs : $59</h3>
                                </div>
                                <div className="counter">
                                    <button className="increase-amount" onClick={increment}>+</button>
                                    <input type="text" className="amount" defaultValue="0" value={count}/>
                                    <button className="decrease-amount" onClick={decrement}>-</button>
                                </div>

                            </div>

                        </div>
                    </div>
                </section>

                <aside className="sidebar-overview">
                    <h1>besteloverzicht</h1>
                    <div className="sidebar-overview-content">

                    </div>
                    <hr/>
                    <div className="sidebar-overview-total">
                        <h3>Totaal: $0</h3>
                    </div>
                </aside>
            </div>
        </div>
    )
}

我尝试更改 useState 并以某种方式将计数器的不同状态存储在一个数组中，但这没有用。

如何分别使用计数器并存储不同按钮的状态？

Answer 1

我会说创建一个 Button 组件并使用它而不是添加更多计数器...因为您以后可能还想在不同的页面中重复使用它。

按钮.js

import { useState } from "react";

function Button() {
  const [count, setState] = useState(0); // useState returns a pair. 'count' is the current state. 'setCount' is a function we can use to update the state.

  function increment(e) {
    //setCount(prevCount => prevCount+=1);
    setState(function (prevCount) {
      return (prevCount += 1);
    });
  }

  function decrement() {
    setState(function (prevCount) {
      if (prevCount > 0) {
        return (prevCount -= 1);
      } else {
        return (prevCount = 0);
      }
    });
  }

  return (
    <div className="counter">
      <button className="increase-amount" onClick={increment}>
        +
      </button>
      <input type="text" className="amount" defaultValue="0" value={count} />
      <button className="decrease-amount" onClick={decrement}>
        -
      </button>
    </div>
  );
}

export default Button;

然后在您的页面中重复使用它；

export default function Ticket() {
    return (
        <div>
            <section className="ticket-step">
                <h1>TICKETS</h1>
            </section>

            <div className="ticket-booking is-flexbox">

                <section className="ticket-content">

                    <ul className="tickets-tab is-flexbox">
                        <li>Tickets</li>
                        <li>Abbonementen</li>
                    </ul>


                    <div className="ticket-list-section">

                        <div className="ticket-list-details heading">
                            <div id="calender">
                                <h3>Datum : 30 - 10 - 2022</h3>
                            </div>

                            <div id="opening">
                                <h3>Openingstijden: 12:00 - 20:00 </h3>
                            </div>
                        </div>

                        <div className="ticket-list-details">

                            <div className="ticket-block">

                                <div className="ticket-title">
                                    <h3>Parkeer ticket</h3>
                                </div>
                                <div className="price">
                                    <h3>Prijs: $20</h3>
                                </div>

                                <Button/>

                            </div>

                            <div className="ticket-block">

                                <div className="ticket-title">
                                    <h3>Early Horror-ticket</h3>
                                </div>
                                <div className="price">
                                    <h3>Prijs : $59</h3>
                                </div>

                                <Button/>

                            </div>

                        </div>
                    </div>
                </section>

                <aside className="sidebar-overview">
                    <h1>besteloverzicht</h1>
                    <div className="sidebar-overview-content">

                    </div>
                    <hr/>
                    <div className="sidebar-overview-total">
                        <h3>Totaal: $0</h3>
                    </div>
                </aside>
            </div>
        </div>
    )
}