我已经创建了一个下拉框来显示剩余的门票数量以供选择。我也有一个数字输入字段来给予门票数量。考虑输入字段有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