禁用 Reactjs 中的依赖下拉选项

我正在制作一个简单的反应应用程序，其中有一些下拉列表，其中一个依赖于另一个。

-> 这里下拉菜单 1 的值为游戏类型，例如Indoor and Outdoor.

-> 这里下拉菜单 2 的值为运动类型，例如Chess , Tennis and Football .

要求：

需要涵盖以下不同的用例，

应用场景：

-> 用户选择Indoor from 下拉菜单 1，然后在下拉菜单 2仅值Chess需要启用，其他需要启用 禁用。

-> 用户选择Outdoor from 下拉菜单 1，然后在下拉菜单 2仅值Tennis and Football需要启用并选择国际象棋 需要禁用。

反之亦然：

-> 用户选择Chess from 下拉菜单 2，然后在下拉菜单 1仅值Indoor需要启用，其他需要启用 禁用。

-> 用户选择Tennis or Football from 下拉菜单 2，然后在下拉菜单 1仅值Outdoor需要启用，其他需要禁用。

Here we provide option of allowClear https://ant.design/components/select/#Select-props so that user can reset their selection in any select box selection (the close icon) and do the above mentioned scenario in any way like selecting option from first dropdown or in second dropdown based on which the another dropdown make the option enable or disable.

现在我有这样的数据并可以进行修改以达到预期的结果。

const data = {
  games: {
    type: [
      { id: 1, value: "Indoor", sportId: [2] },
      { id: 2, value: "Outdoor", sportId: [1, 3] }
    ],
    sport: [
      { id: 1, value: "Tennis", typeId: [2] },
      { id: 2, value: "Chess", typeId: [1] },
      { id: 3, value: "Football", typeId: [2] }
    ]
  }
}

属性名称可能会有所不同，所以我cannot依赖于代码中的硬编码/静态名称，例如data.games.type or data.games.sport.

因此我尝试使用动态方法，例如

{Object.entries(data.games).map((item, index) => {
        return (
          <div className="wrapper" key={index}>
            <h4> {item[0]} </h4>
            <Select
              defaultValue="selectType"
              onChange={handleChange}
              allowClear
            >
              <Option value="selectType"> Select {item[0]} </Option>
              {item[1].map((option, j) => (
                <Option key={j} value={option.value}>
                  {option.value}
                </Option>
              ))}
            </Select>
            <br />
          </div>
        );
 })}

Reactjs 沙箱：

注意：这些选项需要（仅）被禁用并且应该not从选择框中删除，因为用户可以清除任何选择框选择并 从任何下拉列表中选择值。

纯 JavaScript 方法：（忽略此 JS 示例中下拉列表的重置，该示例在清除图标（关闭图标）的帮助下在 ReactJS 中处理）

这里还有Pure JS（工作）方法尝试使用硬编码选择框，每个元素分别带有 id，并且每个元素中都有一些重复的代码addEventListener,

const data = {
  games: {
    type: [
      { id: 1, value: "Indoor", sportId: [2] },
      { id: 2, value: "Outdoor", sportId: [1, 3] }
    ],
    sport: [
      { id: 1, value: "Tennis", typeId: [2] },
      { id: 2, value: "Chess", typeId: [1] },
      { id: 3, value: "Football", typeId: [2] }
    ]
  }
}

const typeSelect = document.getElementById('type')
const sportSelect = document.getElementById('sport')

const createSelect = (values, select) => {
  values.forEach(t => {
    let opt = document.createElement('option')
    opt.value = t.id
    opt.text = t.value
    select.append(opt)
  })
}

createSelect(data.games.type, typeSelect)
createSelect(data.games.sport, sportSelect)

typeSelect.addEventListener('change', (e) => {
  const val = e.target.value
  const type = data.games.type.find(t => t.id == val)
  Array.from(sportSelect.querySelectorAll('option')).forEach(o => o.disabled = true)
  type.sportId.forEach(sId =>
    sportSelect.querySelector(`option[value="${sId}"]`).disabled = false)
})

sportSelect.addEventListener('change', (e) => {
  const val = e.target.value
  const sport = data.games.sport.find(s => s.id == val)
  Array.from(typeSelect.querySelectorAll('option')).forEach(o => o.disabled = true)
  sport.typeId.forEach(sId =>
    typeSelect.querySelector(`option[value="${sport.typeId}"]`).disabled = false)
})

<select id="type"></select>
<select id="sport"></select>

您能帮我实现以下结果吗禁用相应的选项根据上述场景中提到的条件从相应的选择框中纯反应js way?

对于@Andy给出的评论，我正在使用的选择中有一个重置选项可用，关闭图标，因此使用该用户可以清除选择框并选择其他下拉选项。该选项在下面提供允许清除 https://ant.design/components/select/#Select-props in the antd选择 https://ant.design/components/select。请查看我在上面的代码和框中的选择框，它在最后有清晰的图标。

根据我对你的问题的理解，这是我的可行解决方案。您需要能够轻松地针对其他动态选项进行验证的动态选项。这是我能想到的最好的方案，但也不是完全无法维护。大约 98% 是动态的，但出于验证目的，有些属性do需要定义。

Example:

设置接口和类型

interface IState { // <-- need to be known
  type: number;
  sport: number;
}

interface IOption {
  id: number;
  value: string;
  valid: Record<keyof IState, number[]>;
}

type Valid = "sport" & "type"; // <-- this needs to be known

interface Data {
  games: {
    [key: string]: Array<Record<Valid, IOption[]>>;
  };
}

Data

const data: Data = {
  games: {
    type: [
      { id: 1, value: "Indoor", valid: { sport: [2] } },
      { id: 2, value: "Outdoor", valid: { sport: [1, 3] } }
    ],
    sport: [
      { id: 1, value: "Tennis", valid: { type: [2] } },
      { id: 2, value: "Chess", valid: { type: [1] } },
      { id: 3, value: "Football", valid: { type: [2] } }
    ],
  }
};

创建组件状态以保存选定的选项值。这些应该与数据中已知的选择类型相匹配。这里的想法是，我们现在将选择输入转换为受控输入，以便我们可以根据所选状态验证选项。

export default function App() {
  const [state, setState] = React.useState<IState>({
    type: -1,
    sport: -1,
    category: -1
  });

  const changeHandler = (key: keyof IState) => (value: number) => {
    setState((state) => ({
      ...state,
      [key]: value
    }));
  };

这是添加的重点。根据数据配置针对当前选定的状态值验证选项。查看每个选项的valid对象并与当前选定的状态进行比较。返回当前选项是否是有效的可选选项。

  const isValid = (key: keyof IState, option: IOption) => {
    const { valid } = option;

    return (Object.entries(valid) as [[keyof IState, number[]]]).every(
      ([validKey, validValues]) => {
        const selectedValue = state[validKey];
        if (!selectedValue || selectedValue === -1) return true;

        return validValues.includes(state[validKey]);
      }
    );
  };

  return (
    <>
      <br />
      {(Object.entries(data.games) as [[keyof IState, IOption[]]]).map(
        ([key, options]) => {
          return (
            <div className="wrapper" key={key}>
              <h4>{key}</h4>
              <Select
                value={state[key] || -1}
                onChange={changeHandler(key)}
                allowClear
              >
                <Option disabled value={-1}>
                  Select {key}
                </Option>
                {options.map((option) => (
                  <Option
                    key={option.id}
                    value={option.id}
                    disabled={!isValid(key, option)} // if not valid, then disable
                  >
                    {option.value}
                  </Option>
                ))}
              </Select>
              <br />
            </div>
          );
        }
      )}
    </>
  );
}