React JS中多select下拉框联动动态限制可选值的实现方法咨询

实现思路 #

核心逻辑是通过全局状态管理所有用户的选择值，实时计算每个下拉框的可选最大值：

• 总苹果数固定为5，每个用户的最大可选值 = 5 - 前面所有用户已选苹果的总和
• 任意下拉框值变更时，自动校验后续用户的已选值是否超出剩余额度，超出则重置为0，避免总领取量超标

完整实现代码 #

import { useState } from 'react';

const TOTAL_APPLES = 5;
const USER_COUNT = 5;

export default function AppleDistributor() {
  // 存储每个用户的领取数量，默认都是0
  const [selections, setSelections] = useState(Array(USER_COUNT).fill(0));

  const handleSelectChange = (index, value) => {
    const numValue = Number(value);
    const newSelections = [...selections];
    newSelections[index] = numValue;

    // 校验后续用户的选择是否超出剩余额度，超出则重置为0
    let remaining = TOTAL_APPLES;
    for (let i = 0; i < USER_COUNT; i++) {
      if (i < index) {
        remaining -= newSelections[i];
      } else {
        // 当前及之后的用户选择不能超过剩余量
        if (newSelections[i] > remaining) {
          newSelections[i] = 0;
        }
        remaining -= newSelections[i];
      }
    }
    setSelections(newSelections);
  };

  // 计算指定位置用户的最大可选值
  const getMaxValue = (index) => {
    let used = 0;
    for (let i = 0; i < index; i++) {
      used += selections[i];
    }
    return TOTAL_APPLES - used;
  };

  return (
    <div style={{ padding: '20px' }}>
      <h3>苹果分配（总共有{TOTAL_APPLES}个苹果）</h3>
      {selections.map((count, index) => {
        const max = getMaxValue(index);
        // 生成0到max的option数组
        const options = Array.from({ length: max + 1 }, (_, i) => i);
        return (
          <div key={index} style={{ margin: '10px 0' }}>
            <label style={{ marginRight: '10px' }}>用户{index + 1}：</label>
            <select
              value={count}
              onChange={(e) => handleSelectChange(index, e.target.value)}
            >
              {options.map((num) => (
                <option key={num} value={num}>
                  {num}
                </option>
              ))}
            </select>
            <span style={{ marginLeft: '10px' }}>已选{count}个，最大可选{max}个</span>
          </div>
        );
      })}
      <div style={{ marginTop: '20px', fontWeight: 'bold' }}>
        总已领取：{selections.reduce((sum, cur) => sum + cur, 0)}个，剩余：{TOTAL_APPLES - selections.reduce((sum, cur) => sum + cur, 0)}个
      </div>
    </div>
  );
}

功能验证 #

可直接运行上述代码测试效果：

• 用户1选2个后，用户2的最大可选自动变成3，不会出现4、5选项
• 用户2再选2个，用户3的最大可选变成1，仅保留0、1选项
• 若修改前面用户的选择减少领取量，后续用户的可选最大值会自动扩容
• 若修改前面用户的选择增加领取量，后续用户已选值超标的会自动重置为0，保证总领取量不会超过5

内容的提问来源于stack exchange，提问作者user14957799