Блог

Главная - Вопросы по программированию - Выпадающее динамическое значение в React

Выпадающее динамическое значение в React

#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"}
Метки: