React:如何制作递增和递减计数器的按钮

Question

这是我第一次尝试react，我正在尝试制作一个售票柜台。它应该根据所选的箭头图像增加和减少1。到目前为止，我的网页上完全没有显示任何内容。不知道我做错了什么？

import React, { useState } from "react";
function TicketCounter() {
const counter = () => {
const [counter, setCounter] = useState(0);

const incrementCounter = () => {
setCounter(counter + 1);
};

const decrementCounter = () => {
if (counter !== 0) {
setCounter(counter - 1);
}
};
};

return (
<div className="ticket-options">
<div className="option-adult">
<p>Adult Tickets (16+)</p>
<div className="ticket-amount">
<button
className="arrow-up"
onClick={incrementCounter}>
<img src="images/arrowup.png" alt="arrow pointing upwards"/>
</button>
<span className="number">
textContent = {counter}
</span>
<button
className="arrow-down"
onClick={decrementCounter}>
<img src="images/arrowdown" alt="arrow pointing downwards"/>
</button>
</div>
</div>

<div className="option-minor"> 
<p>Minor Tickets (15-)</p>
<div className="ticket-amount">
<img 
src={'../images/arrow.png'} 
alt="arrow up"
className="arrow-up"
onClick={incrementCount}
/>
<span className="number">
textContent = {counter}
</span>
<img 
src={'../images/arrow.png'} 
alt="arrow down"
className="arrow-down"
onClick={decrementCount}
/>
</div>
</div>
</div>
)
}
ReactDOM.render(<TicketCounter />, document.querySelector(".react-insert"));

我的html在正文末尾包括<div class="react-insert"><div>和<script src="/scripts/tickets.js" type="text/babel"></script>，在头部中包含此内容

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 

Answer 1

封装在counter函数中的状态和函数。你应该删除的功能

const [counter, setCounter] = useState(0);

const incrementCounter = () => {
setCounter(counter + 1);
};

const decrementCounter = () => {
if (counter !== 0) {
setCounter(counter - 1);
}
};

在图像的onClick中，你有typo，而不是incrementCounter和decrementCounter，你放了incrementCount和decrementCount

这是工作版本https://codesandbox.io/embed/elated-wiles-9j9bbr?fontsize=14&隐藏导航=1&主题=深色