React中实现下拉框剩余票数选择的计算方案

核心问题 #

现有代码的下拉框选项仅依赖总票数numTickets生成，完全没考虑已选值的影响，所以没法实现你要的动态限制逻辑。

实现思路 #

1. 先统计全局已选值：判断是否有下拉框选了3，以及在存在3的前提下是否有下拉框选了2
2. 给每个下拉框动态生成可选选项：
   • 没选过3时：可选1到总票数的所有数字
   • 选过3但没选过2时：仅可选1、2（已选3的下拉框保留自身选项）
   • 选过3且选过2时：仅可选0（已选过值的下拉框保留自身选项，避免强制清空）

修改后的代码 #

import { useState } from "react";
const Example = () => {
  const [numTickets, setNumTickets] = useState(5);
  const [selectedValues, setSelectedValues] = useState({
    adultNonVeg: "0",
    childNonVeg: "0",
    adultVeg: "0",
    childVeg: "0",
  });

  // 把已选值转成数字数组，方便判断
  const selectedNumbers = Object.values(selectedValues).map(Number);
  const hasSelected3 = selectedNumbers.includes(3);
  const hasSelected2With3 = hasSelected3 && selectedNumbers.includes(2);

  function handleChange(event, name) {
    const value = event.target.value;
    setSelectedValues({ ...selectedValues, [name]: value });
  }

  // 生成单个下拉框的可选选项
  const getOptions = (currentValue) => {
    const options = [<option key="0" value="0">选择选项</option>];

    if (hasSelected2With3) {
      // 有3且有2时，仅保留当前已选值（非0的情况）
      if (currentValue !== "0") {
        options.push(<option key={currentValue} value={currentValue}>{currentValue}</option>);
      }
    } else if (hasSelected3) {
      // 有3但无2时，允许选1、2，同时保留已选的3
      [1, 2].forEach(num => {
        options.push(<option key={num} value={num}>{num}</option>);
      });
      if (currentValue === "3") {
        options.push(<option key="3" value="3">3</option>);
      }
    } else {
      // 无3时，生成1到总票数的所有选项
      for (let i = 1; i <= numTickets; i++) {
        options.push(<option key={i} value={i}>{i}</option>);
      }
    }
    return options;
  };

  return (
    <div>
      <label>
        总票数:
        <input
          type="number"
          value={numTickets}
          onChange={(event) => setNumTickets(Number(event.target.value))}
        />
      </label>
      <br />
      <label>
        成人非素食:
        <select
          value={selectedValues.adultNonVeg}
          onChange={(event) => handleChange(event, "adultNonVeg")}
        >
          {getOptions(selectedValues.adultNonVeg)}
        </select>
      </label>
      <br />
      <label>
        儿童非素食:
        <select
          value={selectedValues.childNonVeg}
          onChange={(event) => handleChange(event, "childNonVeg")}
        >
          {getOptions(selectedValues.childNonVeg)}
        </select>
      </label>
      <br />
      <label>
        成人素食:
        <select
          value={selectedValues.adultVeg}
          onChange={(event) => handleChange(event, "adultVeg")}
        >
          {getOptions(selectedValues.adultVeg)}
        </select>
      </label>
      <br />
      <label>
        儿童素食:
        <select
          value={selectedValues.childVeg}
          onChange={(event) => handleChange(event, "childVeg")}
        >
          {getOptions(selectedValues.childVeg)}
        </select>
      </label>
    </div>
  );
};
export default Example;

关键修改说明 #

• 新增状态判断：通过hasSelected3和hasSelected2With3捕捉触发限制的条件
• 封装getOptions函数：根据全局状态和当前下拉框的已选值，动态生成符合规则的选项，同时保留用户已选的合法值
• 修正总票数的类型转换：确保numTickets是数字类型，避免生成选项时出现异常

内容的提问来源于stack exchange，提问作者prabahar.L