我已经创建了一个下拉框来显示剩余的门票数量以供选择。我也有一个数字输入字段来给予门票数量。考虑输入字段有5张门票,并选择了5在下面的下拉列表中,现在如果我尝试将输入更改为零,它会显示错误,并不显示。另一个问题是选择列表不应显示0的选择。
import { useState } from "react";
const Dropdown = () => {
const [numTickets, setNumTickets] = useState(0);
const [selectedValues, setSelectedValues] = useState({
adultNonVeg: 0,
childNonVeg: 0,
adultVeg: 0,
childVeg: 0,
});
function handleChange(event, name) {
const values = event.target.value;
setSelectedValues({ ...selectedValues, [name]: values });
console.log("1", values);
}
return (
<div>
<label>
Number of tickets:
<input
type="number"
value={numTickets}
onChange={(event) => setNumTickets(event.target.value)}
/>
</label>
<br />
<label>
Adult Non-Veg:
<select
value={selectedValues.adultNonVeg}
onChange={(event) => handleChange(event, "adultNonVeg")}
>
{[
...Array(
numTickets -
selectedValues.childNonVeg -
selectedValues.adultVeg -
selectedValues.childVeg +
1
),
].map((it, i) => (
<option key={i} value={i}>
{i}
</option>
))}
</select>
</label>
<br />
<label>
Child Non-Veg:
<select
value={selectedValues.childNonVeg}
onChange={(event) => handleChange(event, "childNonVeg")}
>
{[
...Array(
numTickets -
selectedValues.adultNonVeg -
selectedValues.adultVeg -
selectedValues.childVeg +
1
),
].map((it, i) => (
<option key={i} value={i}>
{i}
</option>
))}
</select>
</label>
<br />
<label>
Adult Veg:
<select
value={selectedValues.adultVeg}
onChange={(event) => handleChange(event, "adultVeg")}
>
{[
...Array(
numTickets -
selectedValues.adultNonVeg -
selectedValues.childNonVeg -
selectedValues.childVeg +
1
),
].map((it, i) => (
<option key={i} value={i}>
{i}
</option>
))}
</select>
</label>
<br />
<label>
Child Veg:
<select
value={selectedValues.childVeg}
onChange={(event) => handleChange(event, "childVeg")}
>
{[
...Array(
numTickets -
selectedValues.adultNonVeg -
selectedValues.childNonVeg -
selectedValues.adultVeg +
1
),
].map((it, i) => (
<option key={i} value={i}>
{i}
</option>
))}
</select>
</label>
</div>
);
};
export default Dropdown;
这是我尝试的代码我需要的是如果我改变输入为0然后错误不应该发生。零不应该可供选择。选择字段必须从1开始
2条答案
按热度按时间w8ntj3qf1#
您的问题是,当您将numTickets放在
""
上时,您尝试使用该值进行加法运算,但这是不可能的,因此我所做的是添加一个测试,如果它是""
,则它将重置为0,问题解决解决办法是这样的:
toiithl62#
我想把这段代码作为一个挑战,并且能够做到并修复它
您遇到的问题是,无论何时重置numTickets的值,都会使传递给Array()的参数成为一个数字
因为您没有重置从先前状态中选择的票据,并且该状态仍保留其旧值
因此,您将得到numTickets = 0,但其他票证将大于0,从而创建一个-ve值,即使我们通过确保剩余票证的总数大于0来修复该问题
您的票据仍将具有旧状态的某些值,并且numTickets = 0违反逻辑,因此您需要重置票据数量沿着所选票据
请检查:https://playcode.io/1055067