Question

我想使用以下枚举在React中显示一个下拉列表。这个想法是为了防止在我的<select>中使用随机字符串作为键。密钥应限制为Stooges.larry，Stooges.curly和Stooges.moe：

const Stooges = {
  larry: "Larry Fine",
  curly: "Curly Howard",
  moe: "Moe Howard"
};

这是我选择的代码，它可以正常工作：

<select value={stooge} onChange={handleChange}>
  {Object.keys(Stooges).map(key => (
    <option key={key} value={key}>
      {Stooges[key]}
    </option>
  ))}
</select>

当我尝试设置下拉菜单的初始值时出现了问题-我必须使用硬编码键：

const [stooge, setStooge] = React.useState('larry');

我可以通过选择第一个键来使其柔和一些：

const keys = Object.keys(Stooges);
const [stooge, setStooge] = React.useState(keys[0]);

但是，这仍然感觉不对。我无法从key[0]得知我在挑选谁。

在此用例中是否有更好的方法来处理枚举？我曾在TypeScript中尝试过字符串枚举，但是它们存在相同的问题：

enum Stooges {
  larry = "Larry Fine",
  curly = "Curly Howard",
  moe = "Moe Howard"
}

请参阅我的CodeSandbox here。

Answer 1

由于缺乏更好的解决方案，我采用了以下方法。我至少能够按名称选择正确的枚举：Stooges.larry.id：

const Stooges = {
  larry: {
    id: "larry",
    name: "Larry Fine"
  },
  curly: {
    id: "curly",
    name: "Curly Howard"
  },
  moe: {
    id: "moe",
    name: "Moe Howard"
  }
};

function App() {
  const [stooge, setStooge] = React.useState(Stooges.larry.id);

  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setStooge(event.target.value);
  };

  return (
    <div className="App">
      <select value={stooge} onChange={handleChange}>
        {Object.keys(Stooges).map(key => (
          <option key={key} value={key}>
            {Stooges[key].name}
          </option>
        ))}
      </select>
    </div>
  );
}

这是新的CodeSandbox：https://codesandbox.io/embed/wqj2q94o2k

在React select中使用枚举

1 个答案: