Использование перечислений в React select
Я хочу показать раскрывающийся список в React, используя следующее перечисление. Идея состоит в том, чтобы предотвратить использование случайных строк в качестве ключей в моем <select>. Ключи должны быть ограничены Stooges.larry, Stooges.curly и Stooges.moe:
const Stooges = {
larry: "Larry Fine",
curly: "Curly Howard",
moe: "Moe Howard"
};
Вот код для моего выбора, который отлично работает:
<select value = {stooge} onChange = {handleChangeEvent}>
{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 здесь.
Ответы 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 handleChangeEvent = (event: React.ChangeEvent<HTMLSelectElement>) => {
setStooge(event.target.value);
};
return (
<div className = "App">
<select value = {stooge} onChange = {handleChangeEvent}>
{Object.keys(Stooges).map(key => (
<option key = {key} value = {key}>
{Stooges[key].name}
</option>
))}
</select>
</div>
);
}
Вот новая CodeSandbox: https://codesandbox.io/embed/wqj2q94o2k
Я узнал, что
keyof Stoogesбудет работать только дляtype Stooges = {...}, поэтому удалил свой ответ :(