如何在 React 中遞增/遞減單獨的計數器？

Question

我為一個項目制作了一個訂票系統，但是當我想增加其中一張票的數量時，兩個櫃台都會增加。 我不確定為什么會發生這種情況，但我認為這是因為 state 中只存儲了一個值。

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並以某種方式將計數器的不同狀態存儲在一個數組中，但這沒有用。

如何分別使用計數器並存儲不同按鈕的state？

Answer 1

希望這會有所幫助，看看我是如何更改輸入標簽的值和 useState 讓我知道它是否有效

 import React, { useState } from "react"; export default function App() { const [count, setState] = useState({ first: 0, second: 0 }); function increment(type) { setState(prev => ({...prev, [type]: count[type] + 1 })) } function decrement(type) { if(count[type] === 0) return; setState(prev => ({...prev, [type]: count[type] - 1 })) } 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("first")}> + </button> <input type="text" className="amount" defaultValue="0" value={count.first} /> <button className="decrease-amount" onClick={() => decrement("first")}> - </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("second")}> + </button> <input type="text" className="amount" defaultValue="0" value={count.second} /> <button className="decrease-amount" onClick={() => decrement("second")}> - </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> ); }

Answer 2

我會說創建一個 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>
    )
}

Answer 3

您可以實現一個計數器掛鈎以及一個計數器組件。

使用計數器.jsx

import { useState } from "react";

// An enum to track whether it's increment or decrement

const actionEnum = {
  INCREMENT: "increment",
  DECREMENT: "decerement"
};
const useCounter = (initialValue = 0) => {

  // State to hold the value
  const [count, setCount] = useState(initialValue);

  // The function that set's the count based on the name of the element

  function handleChange({ target }) {
    const { name } = target;
    setCount((prev) => (name === actionEnum.INCREMENT ? prev + 1 : prev - 1));
  }
  return {
    count,
    handleChange,
    actionEnum
  };
};

export default useCounter;

計數器.jsx

import useCounter from "./useCounter";

const Counter = () => {
  const { count, handleChange, actionEnum } = useCounter();

  return (
    <>
      <p>{count}</p>
      <button name={actionEnum.INCREMENT} onClick={handleChange}>
        +
      </button>
      <button name={actionEnum.DECREMENT} onClick={handleChange}>
        -
      </button>
    </>
  );
};
export default Counter;

最后，只需為您需要的每個計數器導入 Counter 組件。

示例： https://codesandbox.io/s/patient-hooks-0ohyun?file=/src/App.js

您還可以更新組件，以便它采用 fn 的道具，設置全局 state 跟蹤所有計數器

Answer 4

您應該使用 2 個計數器而不是一個，因此您將有 2 個 useState() 語句。

const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(0);

然后您的按鈕和顯示需要適當地引用單獨的計數器狀態。

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

您還需要有 2 個獨立的遞增函數和 2 個獨立的遞減函數。 或者，您可以有一個增量 function，它帶有一個參數來指定要更新的計數器。

如何在 React 中遞增/遞減單獨的計數器？

問題描述

4 個解決方案

解決方案1
3 2022-12-09 01:32:30

解決方案2
2 已采納 2022-12-09 00:13:17

解決方案3
1 2022-12-09 00:39:21

解決方案4
0 2022-12-08 23:56:39

如何在 React 中遞增/遞減單獨的計數器？

問題描述

4 個解決方案

解決方案1 3 2022-12-09 01:32:30

解決方案2 2 已采納 2022-12-09 00:13:17

解決方案3 1 2022-12-09 00:39:21

解決方案4 0 2022-12-08 23:56:39

解決方案1
3 2022-12-09 01:32:30

解決方案2
2 已采納 2022-12-09 00:13:17

解決方案3
1 2022-12-09 00:39:21

解決方案4
0 2022-12-08 23:56:39