#javascript #reactjs #ecmascript-6 #react-hooks
Вопрос:
У меня есть вызываемая types
переменная, которую я хочу отобразить в раскрывающемся списке выбор. Мне трудно это показать. Его значения являются динамическими на основе types
. Пожалуйста, проверьте мои коды и поле здесь
Код
{types.map((value, index) => (
<Dropdown value={value} index={index} />
))}
const Dropdown = ({ value, index }) => {
const select = (e) => {
console.log(e);
};
return (
<Select onChange={(e) => select(e)}>
{/* {value.map((value, index) => (
{value.name}
<option value="1">{value.option[index 1]}</option>
))} */}
</Select>
);
};
Ответ №1:
В <Dropdown />
компоненте значение является не массивом, а объектом. Если вы хотите повторить его, выполните следующие действия:
const Dropdown = ({ value, index }) => {
const select = (e, value) => {
console.log("event", e);
console.log("object", value);
};
return (
<Select onChange={(e) => select(e, value)}>
{Object.keys(value)
.filter((key) => value[key] amp;amp; key.startsWith("option"))
.map((key, index) => (
<option value={key}>{value[key]}</option>
))}
</Select>
);
};
https://codesandbox.io/s/dynamic-select-dropdown-styled-components-forked-78qm6?file=/Dropdown.js
Комментарии:
1. Привет, он должен отображать значение параметров, таких как 6 пакетов, красный, синий и т.д…
2. @Джозеф, тебе просто нужно было поменять ключ/значение, например
<option value={key}>{value[key]}</option>
. Я обновил свой ответ и кодовое поле3. Спасибо. любая идея, как не отображать
null values
, а также консоль. регистрируйте весь объект, выбранный вselect
функции.4. @Joseph, чтобы удалить нулевое значение, просто добавил дополнительную проверку в функцию фильтра
value[key] amp;amp; key.startsWith("option")
. Чтобы отобразить выбранный объект, мне пришлось передать его в функцию выбора. Обновил свой ответ и песочницу5. @Джозеф, забыл обновить URL-адрес песочницы в предыдущем правке codesandbox.io/s/…
Ответ №2:
Используя вашу структуру данных, ваш Dropdown
компонент будет работать, если вы сделаете это таким образом, но выберете только первый вариант.
const Dropdown = ({ value, index }) => {
return (
<Select>
<option value="1">{value[`option${index 1}`]}</option>
</Select>
);
};
Но вот что я советую, если это находится в пределах вашего контроля, я бы посоветовал вам types
немного изменить структуру данных, чтобы сделать что-то вроде приведенного ниже
const types = [
{
id: "1",
name: "color",
options: [
{value: "red", label: "red"},
{value: "blue", label: "blue"}
],
price: 12
},
{
id: "2",
name: "weight",
options: [
{value: "", label: "Placeholder"},
{value: "20", label: "20 Kilos"},
{value: "30", label: "30 Kilos"},
{value: "40", label: "40 Kilos"},
{value: "50", label: "50 Kilos"}
],
price: 13
}
];
Затем ваш раскрывающийся компонент также может быть преобразован в этот
const Dropdown = ({ options, index }) => {
return (
<Select>
{options.map((option) => <option value={option.value}>{option.label}</option>)}
</Select>
);
};
Это позволит вам легко использовать ваш Dropdown
компонент с type
массивом следующим образом
return (
<MainContainer>
{types.map((value, index) => (
<Dropdown options={value.options} index={index} />
))}
</MainContainer>
);
Ответ №3:
Я предлагаю исправить структуру типов, в любом случае вы можете исправить ее в js-стороне, выполнив следующий код
let options = Object.fromEntries(Object.entries(value).filter(entry => Object.keys(value).filter(k => k.startsWith("option")).includes(entry[0])));
пример значения параметров:
{option1: "20 Kilo", option2: "30 Kilo", option3: "40 Kilo", option4: "50 Kilo"}