React JS 中的条件下拉菜单

Question

我正在构建一个 Dnd 字符表构建器。我需要 6 个下拉菜单来显示 6 个主要统计数据。我希望他们都能够访问一组值 [8,10,12,13,14,15]，但如果一个下拉列表选择一个数字，我需要该数字在下拉列表中不可用。因此，如果用户选择 15 作为强度分数，其他下拉菜单将不再有选择 15 的选项。

这是我构建下拉菜单的地方。

    <div>
      {standardArray.map((stat, index) => {
        return (
          <div key={index}>
            <Text marginLeft={5}> {stat.name[index]}</Text>
            <Select
              placeholder={stat.name[index]}
              width="90%"
              marginLeft={3}
              marginBottom={3}
              onChange={handleChange}
              name={"playerStat" + [index]}
            >
              Name: {stat.name}
              {stat.value.map((value, index) => {
                return (
                  <option key={index} value={value}>
                    {value}
                  </option>
                );
              })}
            </Select>
          </div>
        );
      })}
    </div>

这些是数组和赋值

function App() {
  const [count, setCount] = useState(0);
  const statArray = [8, 10, 12, 13, 14, 15];
  const statTitles = ["STR", "CON", "DEX", "INT", "WIS", "CHA"];
  const standardArray = [
    { id: 1, name: statTitles, value: statArray },
    { id: 2, name: statTitles, value: statArray },
    { id: 3, name: statTitles, value: statArray },
    { id: 4, name: statTitles, value: statArray },
    { id: 5, name: statTitles, value: statArray },
    { id: 6, name: statTitles, value: statArray },
  ];

  const [state, setState] = useState({
    playerName: "Test",
    playerSpecies: "",
    playerClass: "",
    playerSubclass: "",
    playerStat0: 15,
    playerStat1: 14,
    playerStat2: 13,
    playerStat3: 10,
    playerStat4: 8,
    playerStat5: 12,
    playerLevel: 1,
    strModifier: 0,
    conModifier: 0,
    dexModifier: 0,
    intModifier: 0,
    wisModifier: 0,
    chaModifier: 0,
    playerHp: 24,
    proficiencyBonus: 2,
    speciesBonus: 0,
  });

Answer 1

您可以过滤正在使用的，例如：

import React from 'react';

const allowedValues = [8, 10, 12, 13, 14, 15];
const stats = [
  'strength',
  'dexterity',
  'constitution',
  'intelligence',
  'wisdom',
  'charisma',
];
const notInUse = array => values =>
  array.filter(v => !values.map(String).includes(String(v)));

export function App(props) {
  const [inUse, setInUse] = React.useState(Array(stats.length).fill(''));

  const handleChange = (index, value) => {
    const newInUse = [...inUse];
    newInUse[index] = value ? Number(value) : '';
    setInUse(newInUse);
  };

  return (
    <div className='App'>
      <h1>Hello Nerd.</h1>
      {stats.map((stat, index) => (
        <div key={stat}>
          <label tyle={{ padding: '16px' }}>
            {stat}: {inUse[index]} {'  '}
          </label>
          <select
            value={inUse[index]}
            onChange={e => handleChange(index, e.target.value)}
          >
            <option value=''>Select a value</option>
            {notInUse(allowedValues)(inUse).map(value => (
              <option key={value} value={value}>
                {value}
              </option>
            ))}
          </select>
        </div>
      ))}
    </div>
  );
}

// Log to console
console.log('Hello console');

它应该调整：

i.E